当一个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时都有预期的行为。

我研究这几天的现在已经无法找到任何信息，所以我想问问是否有人之前或者如果有人有一个解决方案运行到这一点。难道这是在浏览器的错误？还是我失去了一些东西。

编辑：这是一个铬确认的bug，该bug报告可以在这里找到：https://bugs.chromium.org/p/chromium/issues/detail?id=737691。

请参阅下面保罗的答案一种变通方法，直到问题得到解决。

Answer 1

这在浏览器72现在固定。

Answer 2

我同意这是一个Chrome bug，我不有专门的解决方案。但在某些情况下，你可以通过，直到拖事件进行延迟的iframe此举解决的bug。它工作在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 3

这是我使用的解决方法是，而不是听的dragEnd事件，我聆听着drop事件，其中担任我的需求充分，虽然它可能不适合每一个人。