Dragend event does not fire in Chrome when iframe moves in drop function

Question

JSFiddle: https://jsfiddle.net/r8wxpujg/1/

I expect that with every complete drag and drop operation on the drag drag and drop dragend will be a dragend event, dragstart and dragend . A demo related to the above demonstrates this effect by counting dragstart and dragend . When the image is moved using drag-and-drop operations, dragend events dragstart and dragend and the counter increases, as expected. When the button is pressed so that iframe moves instead of moving the image, the dragend counter stops increasing, indicating that the dragend event never fires.

Somehow in Chrome, moving the iframe in the DOM cancels the dragend events.

I tested this in Firefox and IE11, and both have the expected behavior when moving the iframe .

I researched this for several days and could not find any information, so I wanted to ask if anyone had encountered this before or if anyone had a solution. Could this be a bug in Chrome? Or I just missed something.

EDIT : This is a confirmed bug in chrome, a bug report can be found here: https://bugs.chromium.org/p/chromium/issues/detail?id=737691 .

See Paul's answer below for a workaround until the problem is fixed.

Answer 1

I agree that this is a Chrome bug and I have no solution for this. But in some cases, you can work around the error by delaying the movement of the iframe until the completion of the drag and drop events. It works in this fork of your violin . Just replace

 if(element.id === 'div1drag') { document.getElementById('div1').appendChild(item); } else if(element.id === 'div2drag') { document.getElementById('div2').appendChild(item); } 

with this

 if(element.id === 'div1drag') { window.setTimeout(function() { document.getElementById('div1').appendChild(item); }, 0) } else if(element.id === 'div2drag') { window.setTimeout(function() { document.getElementById('div2').appendChild(item); }, 0) } 

Also thanks for reporting this error. It drove me crazy today.

Answer 2

The workaround I used was that instead of listening to the dragEnd event dragEnd I would listen to the drop event, which would satisfy my needs adequately, although it might not work for everyone.

Answer 3

This is fixed in Chrome 72.