Question

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

我的问题是，当您将文件从桌面拖到框中并在框内的文本上方时，会拖动dragleave。（将文件拖到框中会使边框变为实体 - ＆gt;将文件拖到框内的文本上，边框将变为虚线： - ＆gt;这不是我想要的。）

这是一个浏览器错误吗？（firefox 9 @ win）。

我还放了一个用于鼠标上/下的盒子，它可以很好地工作，所以你可以比较两者。

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

PS。我绑定到body，因为我需要在我的真实应用程序中使用事件委派。

Answer 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;
},

Answer 2

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

Answer 3

这个问题相对众所周知，但解决方案都非常'hacky'。我遇到了一个解决方法，在我的情况下修复它，应该适应大多数情况。

我在可能的dropzones的容器（一个盒子）上监听dragenter个事件。只要拖动从一个元素移动到另一个元素并冒泡到容器，事件就会触发。当目标是我的一个掉落区域（或者可能是掉落区域内的一个孩子，但在我的情况下这是不必要的，因为你不能在没有先进入周围的盒子的情况下找到孩子）然后我设置了droppable高亮，和正常一样。

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

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

Answer 4

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

javascript从桌面拖动文件：dragenter / dragleave触发不正确

4 个答案: