当在drop函数中移动iframe时,Dragend事件不会在Chrome中触发

Question

编辑:现在已经在Chrome 72中修复了!

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

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

不知何故,在Chrome中,iframeDOM中的移动会取消dragend事件被触发.

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

我已经研究了这几天了,并且一直无法找到任何信息,所以我想问一下是否有人之前遇到过此问题,或者有人有解决方案.这可能是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 中修复。