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

Posted 2023-02-22

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

【英文标题】：Dragend event not firing in Chrome when an iframe is moved in drop function

【发布时间】：2017-11-29 13:35:57

【问题描述】：

编辑：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 的回答以获得解决方法。

【问题讨论】：

我也看到了这个。抱歉，它没有更多帮助。刚刚找到它，搜索“dragend”和“iframe”，找到了这个。也许这是最近引入的错误？

啊，我看到你提交了一个铬错误：bugs.chromium.org/p/chromium/issues/…

我也在 Chrome/Mac 中看到了这个问题。在我找到你的帖子之前，我一直在疯狂地追踪它。感谢您报告它，希望它很快就会被压扁。

我对你的样本做了一些改动：jsfiddle.net/r8wxpujg/5。帧或图像每 5 秒更改一次它的父级。如果您在“过渡”之间拖放 - 没关系，无论 iframe 被移动还是图像。但是，如果在 dragstart 和 dragend 之间发生“过渡” - 如果 iframe 过渡放置事件失败

【参考方案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)

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

【讨论】：

我接受了您提供解决方法的答案。希望 Chromium 团队能尽快解决这个问题，我可以更新它。

【参考方案2】：

Chrome 72 现已修复此问题。

【参考方案3】：

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

【讨论】：

当你点击escape取消下降时会怎样？