EDIT: This is now fixed in Chrome 72!

JSFiddle: /

On every plete 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: .

See Paul's answer below for a workaround until the issue gets fixed.

EDIT: This is now fixed in Chrome 72!

JSFiddle: https://jsfiddle/r8wxpujg/1/

On every plete 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/p/chromium/issues/detail?id=737691 .

See Paul's answer below for a workaround until the issue gets fixed.

• javascript
• html
• google-chrome
• iframe
• drag-and-drop

• I am also seeing this. Sorry it's not more helpful. Just found it, and searched for "dragend" and "iframe", and found this. Maybe this is a recently introduced bug? – jenming Commented Jul 7, 2017 at 0:16
• Ah, i see you filed a chromium bug: bugs.chromium/p/chromium/issues/… – jenming Commented Jul 7, 2017 at 0:40
• I'm also seeing this issue in Chrome/Mac. Was going crazy trying to trace it until I found your post. Thanks for reporting it and hopefully it gets squashed soon. – bryanus Commented Sep 29, 2017 at 19:35
• I've changed your sample a little: jsfiddle/r8wxpujg/5. The frame or images changes it's parent every 5 sec. If you drag and drop between "transitions" - it is OK, no matter iframe is moved or image. But if a "transition" occurs between dragstart and dragend - in case if iframe transition drop event is failed – Olegas Commented Nov 15, 2017 at 19:07

3 Answers 3

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.

This is fixed now in Chrome 72.

A workaround which I used was to, instead of listening on the dragEnd event, I listened for the drop event, which served my needs adequately, though it might not work for everyone.