javascript 从桌面拖动文件：dragenter / dragleave 触发错误答案

【问题标题】：javascript dragging a file from desktop: dragenter / dragleave triggers uncorrectlyjavascript 从桌面拖动文件：dragenter / dragleave 触发错误
【发布时间】：2012-01-20 15:50:44
【问题描述】：

为此做了一个小提琴：http://jsfiddle.net/terjeto/MN4FJ/

我的问题是，当您将文件从桌面拖到框中并覆盖框内的文本时，dragleave 会触发。（将文件拖入框中将使边框变为实心->将文件拖到框内的文本上，边框将变为虚线：->这不是我想要的）。

这是浏览器错误吗？（火狐 9@win）。

我还放置了一个用于鼠标上下移动的框，效果很好，因此您可以比较两者。

如何实现正确的 dragenter / dragleave 行为？

PS。我绑定到正文，因为我需要在我的真实应用程序中进行事件委托。

【问题讨论】：

标签： javascript html events drag-and-drop

【解决方案1】：

这是规范中一个有据可查的缺点。 As Peter-Paul Koch points out here

这样的函数可以帮助您确定目标元素是否是您要将文件拖放到的目标区域的子元素。

function isChildElement(parent, child) {
    var childParent = child;
    while (childParent) {
        if (childParent == parent) {
           return true;
        }
        childParent = childParent.parentNode;
    }
    return false;
},

【讨论】：

没问题。我有一个小 jquery 小部件，如果您有兴趣，它可以减少处理拖放文件操作的痛苦？
@SamGreenhalgh...你说的这个 jQuery 小部件在哪里？
@Hristo 抱歉，我上个月搬到了中国，但我的 repo 还没有备份，所以我无法拿到剧本。到时候我会告诉你的。

【解决方案2】：

我编写了一个名为 Dragster 的小库来帮助我处理这个问题，它可以在任何地方使用，除了 IE（它什么都不做）。

【讨论】：

【解决方案3】：

这个问题是众所周知的，但解决方案都非常“hacky”。我遇到了一种解决方法，可以在我的情况下修复它，并且应该适用于大多数情况。

我在可能的放置区的容器（一个盒子）上监听dragenter 事件。每当拖动从一个元素移动到另一个元素并冒泡到容器时，事件就会触发。当目标是我的放置区域之一（或者可能是放置区域内的孩子，但在我的情况下这不是必需的，因为如果不先进入周围的框就无法到达孩子），然后我设置可放置突出显示，和平常一样。

当dragenter 事件在容器本身上触发时，我会从前一个元素中删除突出显示，因为我必须离开它。对于dragenter 事件，突出显示的元素是relatedTarget，因此很容易找到并且不需要dragleave 事件监听器。

请注意，您可能会在放置后显式删除突出显示，具体取决于您的确切放置逻辑。

【讨论】：

【解决方案4】：

我遇到了同样的问题，终于找到了一个稳定的解决方案。这是一个名为 draghover 的插件，它可以跨浏览器工作。在这里查看：https://github.com/bingjie2680/jquery-draghover

【讨论】：