当 iframe 在拖放功能中移动时，Chrome 中的 Dragend 事件未触发

Question

编辑：Chrome 72 现已修复此问题！

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

在每个完整的拖放操作中，我希望在被拖动的元素上触发 dragstart 和 dragend 事件。上面链接的演示通过计算dragstart 和dragend 事件来演示这种效果。当图像被拖放操作移动时，dragstart 和dragend 事件触发并且计数器按预期递增。当单击按钮时，不是移动图像，而是移动一个iframe，而不是移动，dragend 计数器停止递增，表示永远不会触发 dragend 事件。

不知何故，在 Chrome 中，在 DOM 中移动 iframe 会取消触发 dragend 事件。

我在 Firefox 和 IE11 中对此进行了测试，并且在移动 iframes 时都具有预期的行为。

我已经对此进行了几天的研究，但找不到任何信息，所以我想问一下是否有人以前遇到过这个问题，或者是否有人有解决方案。这可能是 Chrome 中的错误吗？还是我只是错过了什么。

编辑：这是 Chromium 中已确认的错误，可以在此处找到错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=737691。

在问题得到解决之前，请参阅下面 Paul 的回答以获得解决方法。

Answer 1

我同意这是Chrome bug，我对此没有解决方案。但在某些情况下，您可以通过延迟 iframe 移动直到拖动事件完成来解决该错误。它适用于this fork of your fiddle。只需更换您的

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

有了这个

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

另外，感谢您报告该错误。今天把我逼疯了。

Answer 2

Chrome 72 现已修复此问题。

Answer 3

我使用的一种解决方法是，我没有监听 dragEnd 事件，而是监听了 drop 事件，这充分满足了我的需求，尽管它可能并不适合所有人。