logo标签列表

JavaScript拖拽桌面文件：dragenter / dragleave触发不正确。

javascripthtmleventsdrag-and-drop
4
我为此制作了一个范例：http://jsfiddle.net/terjeto/MN4FJ/ 我的问题是，当你将文件从桌面拖到盒子内并经过盒子内部的文本时，dragleave 会被触发。（将文件拖到盒子中会使边框变实 -> 将文件拖到盒子内部的文本上时边框将变为虚线：-> 这不是我想要的）。
这是一个浏览器的问题吗？（火狐9 @ win）。
我还加入了鼠标上下文框，它能很好地工作，以便您可以进行比较。
如何实现正确的 dragenter / dragleave 行为？
PS. 我绑定到 body，因为在我的真实应用中需要事件委托。
4个回答
2

我写了一个叫做 Dragster 的小型库，来帮助我解决这个问题，在除IE浏览器外的任何地方都有效（在IE浏览器中则无效）。

2
这是规范的一个被充分记录的缺陷。 正如Peter-Paul Koch在这里指出的那样。
像这样的函数可能会帮助您确定目标元素是否是您想要将文件拖放到的目标区域的子元素。
function isChildElement(parent, child) {
    var childParent = child;
    while (childParent) {
        if (childParent == parent) {
           return true;
        }
        childParent = childParent.parentNode;
    }
    return false;
},
2
没问题。我已经制作了一个小的jQuery小部件，使得处理拖放文件操作变得更加轻松，如果你感兴趣的话？ - Sam Greenhalgh
@SamGreenhalgh... 你所说的 jQuery 小部件在哪里？ - Hristo
@Hristo 抱歉，我上个月搬到了中国，我的代码库还没有备份，所以我现在无法获取脚本。等我有了再通知你。 - Sam Greenhalgh
1
该问题相对来说比较常见，但解决方案都比较“hacky”。我找到了一个解决方法，可以适用于大多数情况。
我监听容器（一个框）上的dragenter事件，这些事件会在拖动从一个元素移动到另一个元素时触发并冒泡到容器。当目标是我的放置区域之一（或可能是放置区域内的子元素，但在我的情况下这不是必要的，因为你不能进入周围的框中的子元素），那么我设置可放置的高亮显示，就像正常情况一样。
当dragenter事件在容器本身上触发时，我会删除先前元素的高亮显示，因为我必须离开它。对于dragenter事件，被突出显示的元素是relatedTarget，因此很容易找到，无需dragleave事件侦听器。
请注意，根据您的确切放置逻辑，您可能需要显式地删除高亮显示以进行放置。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接