jQuery Drag-and-Drop Flickering on Hover (Webkit only)
After over an hour of scouring, I found someone who had a similar type of issue. It seems that Chrome and Safari (5, at least) fire dragleave
upon entering a child element (and seemingly, upon any changes to that element, including children being shown/hidden).
The solution is to check if pageX
and pageY
are equal to 0
within dragleave
(but not drop
).
var $dropTarget = $("#container");
$(document).bind("dragenter", function(e) {
if (e.target == this) {
return;
}
$dropTarget.addClass("highlight");
$dropTarget.find("[name='drop']").show();
$dropTarget.find("[name='drag']").hide();
}).bind("dragleave", function(e) {
if (e.originalEvent.pageX != 0 || e.originalEvent.pageY != 0) {
return false;
}
// Could use .trigger("drop") here.
$dropTarget.removeClass("highlight");
$dropTarget.find("[name='drop']").hide();
$dropTarget.find("[name='drag']").show();
}).bind("drop", function(e) {
$dropTarget.removeClass("highlight");
$dropTarget.find("[name='drop']").hide();
$dropTarget.find("[name='drag']").show();
});