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

duplicate question: http://stackoverflow.com/questions/19223352/jquery-ondrop-not-firing/36207641#36207641 — bob, Mar 24 '16 at 18:43
potential answer: http://stackoverflow.com/questions/8414154/html5-drop-event-doesnt-work-unless-dragover-is-handled — bob, Mar 24 '16 at 18:43

score 243 · Accepted Answer · edited Aug 26 '15 at 16:13

243

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.

edited Aug 26 '15 at 16:13

idmean

14,540
9
54
83

answered Jan 24 '14 at 19:36

iamchris

2,621
1
16
15

19

You don't need ondragenter, only ondragover. – access_granted Mar 03 '16 at 01:54
1

Still a no-go, at least when dragging images onto that on latest Chrome. – NoBugs Mar 10 '16 at 08:23
2

Still doesn't work on latest Chromium (Vivaldi 1.2.490.39 () (32-bit) http://jsfiddle.net/f282n3pt/3/ – mcsdwarken Jun 15 '16 at 20:21
2

With reactjs, you need to add onDragOver handler to the same elem. – CHAN Jul 13 '16 at 07:57
14

Is html5 dnd API really THAT bad? – bartosz.baczek Jan 10 '17 at 08: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 '17 at 12:21
btw, `preventDefault()` will not work when you use throttled function for `"dragover"` – Rannie Aguilar Peralta Jun 04 '19 at 01:19
Specifiging `dragover` works. HTML5 has too many inconsistencies like that. What if one has a full page "DROP HERE" target, hence you don't need the drag over event. Weird corner cases, instead of sticking to what each event should fo. – run_the_race Oct 01 '21 at 06:58
This didn't solve the problem for me, but the answer from Bob here: https://stackoverflow.com/a/36207613/884177 resolved the problem. – smohadjer Feb 22 '22 at 09:21
dragover is neccessary to prevent default behaviour for drop event to work even if it shouldn't do anything. – Bjarne Gerhardt-Pedersen Aug 01 '23 at 12:31

score 68 · Answer 2 · edited Oct 25 '17 at 18:07

68

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

edited Oct 25 '17 at 18:07

HoldOffHunger

18,769
10
104
133

answered Feb 16 '16 at 09:32

Michael Falck Wedelgård

2,943
1
27
39

6

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

score 13 · Answer 3 · answered Mar 24 '16 at 18:35

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.

answered Mar 24 '16 at 18:35

bob

7,539
2
46
42

13

Actually you need to do `event.originalEvent.dataTransfer.dropEffect = "copy"` because jQuery uses its own `event` – AymKdn Dec 10 '16 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. – Çh Furqan Hämëèd Jūtt May 01 '23 at 11:03

score 1 · Answer 4 · edited Jun 15 '20 at 14:19

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

Drop event not firing in chrome

4 Answers4

Linked