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.
解决方法
我同意这是一个
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) }
另外,感谢您报告该错误.今天让我发疯了.