Drop event not firing in chrome

Question

It seems the drop event is not triggering when I would expect.

I assume that the drop event fires when an element that is being dragged is releases above the target

Answer 1

In order to have the drop event occur on a div element, you must cancel the ondragenter and ondragover events. Using jquery and your code provided...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

For more information, check out the MDN page.

Answer 2

In order for the drop event to fire, you need to assign a dropEffect during the over event, otherwise the ondrop event will never get triggered:

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

Answer 3

This isn't an actual answer but for some people like me who lack the discipline for consistency. Drop didn't fire for me in chrome when the effectAllowed wasnt the effect I had set for dropEffect. It did however work for me in Safari. This should be set like below:

ev.dataTransfer.effectAllowed = 'move';

Alternatively, effectAllowed can be set as all, but I would prefer to keep specificity where I can.

for a case when drop effect is move:

ev.dataTransfer.dropEffect = 'move';

Answer 4

You can get away with just doing an event.preventDefault() on the dragover event. Doing this will fire the drop event.