當在drop函數中移動iframe時，Dragend事件不會在Chrome中觸發

Question

編輯：現在已經在Chrome 72中修復了！

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

在每次完整的拖放操作中，我都希望在被拖動的元素上觸發dragstart和dragend事件。 上面鏈接的演示通過計算dragstart和dragend事件來演示這種效果。 當通過拖放操作移動圖像時， dragstart和dragend事件將觸發並且計數器按預期遞增。 單擊按鈕時，不是移動圖像而是移動iframe ，而dragend計數器停止遞增，表示dragend事件永遠不會被觸發。

不知何故，在Chrome中，DOM中移動iframe取消dragend事件被觸發。

我已經在Firefox和IE11中對此進行了測試，並且在移動iframe時都具有預期的行為。

我已經研究了這幾天了，並且一直無法找到任何信息，所以我想問一下是否有人之前遇到過此問題，或者有人有解決方案。 這可能是Chrome中的錯誤嗎？ 或者我只是遺漏了一些東西。

編輯 ：這是鉻中確認的錯誤，錯誤報告可以在這里找到： https ： //bugs.chromium.org/p/chromium/issues/detail？id = 737691 。

在問題得到解決之前，請參閱下面的保羅答案以獲得解決方法。

Answer 1

我同意這是Chrome錯誤 ，我沒有解決方案。 但在某些情況下，您可以通過延遲iframe移動來解決錯誤，直到拖動事件完成。 它適用於你小提琴的這個叉子 。 只需更換你的

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事件，它充分滿足了我的需求，盡管它可能對每個人都不起作用。