Drop event not firing in chrome
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.
You can get away with just doing an event.preventDefault()
on the dragover
event. Doing this will fire the drop
event.
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';
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.