119

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 element, but this doesn't seem to the the case.

What am I misunderstanding?

http://jsfiddle.net/LntTL/

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

4 Answers 4

244

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.

10
  • 20
    You don't need ondragenter, only ondragover. Mar 3, 2016 at 1:54
  • 2
    Still doesn't work on latest Chromium (Vivaldi 1.2.490.39 () (32-bit) jsfiddle.net/f282n3pt/3
    – mcsdwarken
    Jun 15, 2016 at 20:21
  • 2
    With reactjs, you need to add onDragOver handler to the same elem.
    – CHAN
    Jul 13, 2016 at 7:57
  • 14
    Is html5 dnd API really THAT bad? Jan 10, 2017 at 8:31
  • 2
    you do need ondragenter as of Chrome 62, as ondragover will only fire after subsequent mouse moves, thus you would not call e.preventDefault(), causing the drop event to sometimes not fire
    – zupa
    Nov 23, 2017 at 12:21
69

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

1
  • 6
    that has an uncovered edge case, you must call e.preventDefault() on dragenter too, see my other comment
    – zupa
    Nov 23, 2017 at 12:22
13

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.
2
  • 13
    Actually you need to do event.originalEvent.dataTransfer.dropEffect = "copy" because jQuery uses its own event
    – AymKdn
    Dec 10, 2016 at 20:57
  • This solution worked for me. After doing work around on this issue, i think think this is necessary to prevent the default behavior of dragover event. May 1 at 11:03
1

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';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.