拖放指令 - IE 中未触发的事件

Posted 2023-05-08

【中文标题】拖放指令 - IE 中未触发的事件

【英文标题】：Drag and Drop Directives - Events Not Firing in IE

【发布时间】：2015-04-17 07:22:02

【问题描述】：

我一直在努力避免只为一个功能导入 jQuery 和 jQuery UI，因此我正在为我正在开发的应用程序开发一组自定义的拖放指令。在 Chrome、Firefox、Opera 和 Safari 中一切正常，但在 IE 9 和 11 中（我没有在 10 上测试过，但我认为它是相同的），dragover 和 drop 事件不会触发。 dragstart、dragend、dragenter 和 dragleave 触发，虽然添加 'over' 类似乎没有任何效果——该类出现在类列表中，但浏览器似乎忽略了它。我在指令中包含了一个 pastebin。如果有人有任何想法，我将不胜感激。

http://pastebin.com/xbC1vPTr

【问题讨论】：

***.com/questions/14903542/…

不知道是否相关，但caniuse.com/#search=drag 显示部分支持 IE 拖放。它说：“在 IE9-10 中，可拖动属性可以有效地应用于链接和图像元素。对于 div 和 span 元素，您应该调用 'element.dragDrop()' 来启动拖动事件。”

这是一个不同的问题。我现在只需要支持 IE11。

【参考方案1】：

向可放置元素添加 min-height 属性解决了这个问题，至少在 IE11 中是这样。如果有人可以解释原因，我会将您的解决方案标记为已接受。同时，我将把它留在这里，以防其他人遇到同样的问题。

【讨论】：

我也一直在努力使用 IE 9 和 11 中相同的 AngularJS 拖放指令。我发现 IE 9 和 11 不支持 this.classList.add('drag'); 和 this.classList.remove('drag');。删除这两行停止脚本错误并允许我在 IE 中拖放。

在我的例子中，我有一系列嵌套的 UL 元素，并且拖放/拖放事件总是在顶部下方的 UL 上触发（但仅在 IE 中）。很高兴我遇到了这个问题——出于某种原因，为 UL 元素添加最小高度也为我解决了这个问题。谢谢。