getting drop after dragleave in html5

I'm registered to HTML5 DnD events in order to get drop files from the desktop. The problem that i see is that i always get dragleave event just before drop event. In the specification there is no mention about something like this - and if you use the dragleave as an indicator that no drop happened then it mess-up the logic.

var dropbox = document.getElementById("dropzone");
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragleave", dragLeave, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);

function dragEnter(e){
    console.log("dragEnter ",e);
    dropbox.style.backgroundColor = "red";
    e.stopPropagation();
    e.preventDefault();
}

function dragLeave(e){
    console.log("dragleave");
    dropbox.style.backgroundColor = "white";
    e.stopPropagation();
    e.preventDefault();
}

function dragOver(e){
    console.log(开发者_Python百科"dragOver ",e);
    e.stopPropagation();
    e.preventDefault();
}

function drop(e){
     console.log("drop ",e);
     var files = e.dataTransfer.files;
     var count = files.length;
     e.stopPropagation();
     e.preventDefault();
}

is this working as design or i'm missing something?

This seems like a good reference: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

Basically, dragLeave is not an indicator that no drop happened. It is an indicator that a draggable object was dragged out of another object.
You don't need it.

[Edit: Basically, dragleave is firing because the item you're dragging is from your desktop. The object it is in before you drop it is basically your desktop. If you drag any file from your desktop over any droptarget, it will fire the dragleave to indicate it's no longer "in" the previous object (your desktop), and now is in the new object ("dropzone"). If you had several dropzones, each time you dragged it over, then out of one of these, the dragleave would fire. You should just use the drop event to tell if a drop happened.]

The dragleave event doesn't actually do what it implies. It's not until you move a draggable object over a dropzone, then move it out without dropping that dragleave fires. It hasn't been implemented for detecting a previously dropped item being dragged out of a dropzone. It is simply part of the event chain falling somewhere between dragstart and dragend. From the spec, it occurs if "the drag operation failed". (Firefox apparently has a known issue in that the dragleave event is called even if the drop succeeded).

http://www.w3.org/html/wg/drafts/html/master/editing.html#drag-and-drop-processing-model

So you're both partially correct. "It is an indicator that a draggable object was dragged out of another object." is true, so long as that draggable object was not previously dropped. Also, to determine that no drop happened is a valid use for the dragleave event.

If what you're trying to accomplish is knowing that after a draggable object has been dropped, it was later removed from the dropzone (i.e. user put something in a trash bin, then decided they wanted to drag it out later), you'll basically be reversing the previous drag/drop events... i.e. your container of draggable items will now become a dropzone, and your original dropzone will contain draggable items or however you figure out based on your setup.

EDIT: Philosophical reasoning... If you can assume that not all Zinks are Zorks, then you can assume that not all applications which implement drag/drop functionality will want to allow a user who dropped something somewhere to remove that dropped item later. Therefore, using drag/drop in certain scenarios would incur the memory overhead by the browser to maintain state of which items had been previously dropped at all times. (Picture a jigsaw puzzle where there is no concept of "state").