Issue

I've just finished implementing a feature in which users can drag files into the browser and drop upon a supporting File Upload plugin, which processes the drop.

However, in order to give users a hint that they can even drop things in the first place, I've implemented a dragover event to show a div that says something akin to "Drop Here". This, in turn, hides the div which has the "Choose File..." button, and replaces it, until the user stops dragging.

But it seems, when I implement this, dragging over the target area is causing flickering. To be clear:

  • div with "Choose File" interface is shown.
  • Item dragged (or selected text dragged); "Drop here" is shown.
  • Item dragged over the "Drop here" area; flickering begins.

Additionally:

  • There is no issue in Opera 12 or Firefox 16.
  • The issue is blatantly obvious in Chrome 23 and Safari 5.
  • The issue is partly there in IE 9 (IE 10 untested); it flickers for about 5 seconds, then stops.

jsFiddle

(Warning: the fiddle is very crude.)

Just select some of the text and drag it over the blue box and you will see what happens; it will be obvious the behavior it should not be exhibiting.

Code used in fiddle

var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
    if ($dropTarget.hasClass("highlight"))
        return;

    $dropTarget.addClass("highlight");
    $dropTarget.find("[name='drop']").show();
    $dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
    if (!$dropTarget.hasClass("highlight"))
        return;

    $dropTarget.removeClass("highlight");
    $dropTarget.find("[name='drop']").hide();
    $dropTarget.find("[name='drag']").show();
});​

My solution...?

jquery drag-and-drop
Edit
Report