logo标签列表

JavaScript 拖拽时的鼠标悬停效果

javascriptdrag-and-drop
11

我正在尝试实现一个拖放脚本，但遇到了一个问题。当你拿起物品并开始拖动时，该物品直接在光标下方，因此鼠标移入事件很少触发。但是我希望当我将某些东西拖到其他物品上面时，其他物品可以突出显示。其中一个解决方案就是根本不拖任何东西 - 这样鼠标事件就会起作用，但那看起来很丑陋。是否有人做过类似的事情并知道如何解决这个问题？

如果你想建议一些JQuery插件或类似的东西，请不要这样做。我不需要一个完整的解决方案，这是教育性的。

另外，我知道我可以在移动鼠标时检查是否在元素范围内并突出显示该元素，但如果这是正确的词，那似乎太...繁重了。 - Marius
你想要检查的元素是否是绝对的？ - stecb
嗯，解决方案应该在任何元素上普遍适用。检查边界不是问题，问题是我不想指定哪些元素是“可放置”的，理想情况下，我希望所有被拖动的元素都会触发“dragOver”事件。但我猜现在唯一的解决方案要么是有一个“droppable”元素列表，要么就是循环遍历所有组件。 - Marius
这主要是因为您已经拥有一个元素而不是指向任何其他元素，您可以尝试一件事情，不要拖动它，只需单击它并将其聚焦，然后移动鼠标，这可能有所帮助...虽然不确定，但它可能会改变您的功能。 - Varun
1个回答
2
我认为，要经常触发mouseover事件，可以将mouseover事件绑定到所有受影响元素的parent元素或者文档本身，因为事件会冒泡，它们可能是唯一能够激发mouseover事件的元素。
然后，在mouseover事件中编写一个hit方法，主动检查鼠标光标的位置，看看是否在目标元素边界下方。在可用性和性能之间做出权衡。您可以选择其中一种。
我的两分意见。
或者，您可以反向工程jQuery UI，看看它们如何实现拖动元素。虽然我没有检查过，但我认为应该有更明智的方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接