Dragend event not firing in Chrome when an iframe is moved in drop function

Question

EDIT: This is now fixed in Chrome 72!

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

On every complete drag-and-drop operation, I expect a dragstart and a dragend event to be fired on the element being dragged. The demo linked to above demonstrates this effect by counting the dragstart and dragend events. When the image is being moved around by the drag-and-drop operations the dragstart and dragend events fire and the counter increments as expected. When the button is clicked so that instead of moving the image around, an iframe is moved around instead, the dragend counter stops incrementing, indicating that the dragend event is never fired.

Somehow in Chrome, the moving of an iframe in the DOM cancels the dragend event from being fired.

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

I have researched this for a couple of days now and have been unable to find any information so I wanted to ask if anyone has run into this before or if someone has a solution. Could this be a bug in Chrome? Or am I just missing something.

EDIT: This is a confirmed bug in chromium, the 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 issue gets fixed.

Answer 1

I agree that this is a Chrome bug and I don't have a solution for that. But in some cases you could work around the bug by delaying the iframe move until the drag events are done. It works in this fork of your fiddle. Just replace your

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 that bug. It was driving me crazy today.

Answer 2

This is fixed now in Chrome 72.