javascript从桌面拖动文件:draginter/dragleave不正确地触发

javascript dragging a file from desktop: dragenter / dragleave triggers uncorrectly

本文关键字：不正确 dragleave 正确地 draginter 桌面 拖动 文件 javascript      更新时间：2023-09-26

为此制作了一把小提琴：http://jsfiddle.net/terjeto/MN4FJ/

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

这是浏览器错误吗？（firefox9@win）

我还放了一个鼠标向上/向下的盒子，效果很好，这样你就可以比较两者了。

如何实现正确的拖拉行为

PS。我绑定到身体，因为我需要在我的真实应用程序中的活动委派。

这是一个有充分记录的规范的短提交。正如彼得·保罗·科赫在这里指出的那样

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

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

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

这个问题相对来说是众所周知的，但解决方案都很"棘手"。我遇到了一个变通方法，可以在我的情况下修复它，并且应该适用于大多数情况。

我在可能的dropzone的容器（一个框）上侦听dragenter事件。每当拖动从一个元素移动到另一个元素并冒泡到容器时，就会触发事件。当目标是我的一个投放区域时（或者可能是投放区域内的一个孩子，但在我的情况下这不是必要的，因为如果不先进入周围的框，你就无法接触到孩子），然后我设置可投放的高亮显示，就像正常一样。

当dragenter事件在容器本身上激发时，我会从上一个元素中删除高亮显示，因为我一定已经离开了它。对于dragenter事件，高亮显示的元素是relatedTarget，因此很容易找到，并且不需要dragleave事件侦听器。

请注意，根据您的确切放置逻辑，您可能会在放置后显式删除高亮显示。

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

相关文章：