我是否需要编写一个jQuery插件来获取悬停事件,同时使用可拖动的?

时间:2012-01-15 21:43:10

标签: jquery jquery-ui jquery-ui-draggable

我正在处理一组连接的标签,每个标签上都有列表。所需的功能是能够将列表项从选项卡A上的列表拖到选项卡B上的列表。用户将从选项卡A上的ul中选取li,在选项卡B上悬停约1秒,选项卡自动切换,然后用户可以向下拖动到选项卡B上的ul并将li放入该列表中。

看起来jQuery ui现在正在拦截所有鼠标事件,一旦可拖动开始并且不让它们通过。我在这里看到另一篇帖子jQuery - stopping a hover event while dragging描述了相反的问题,但它是在2010年制作的,现在悬停在拖动可拖动时不会工作。

我深入研究jQuery ui V. 1.8.17并发现jQuery UI正在拦截所有鼠标操作,检查是否有任何插件想要与它们交互,如果没有将它们传递给浏览器。在可拖动的情况下,它似乎在那里拦截,只是执行它自己的行为,这是有道理的。就draggable而言,一旦拿起某些东西,所有鼠标输入就是。但在我的情况下,draggable没有对悬停输入做任何事情。

我知道我的事件发生了,而A)没有携带可拖动的,只是悬停在标签上。 B)在悬停之前,期间和之后按住鼠标按钮,而不携带可拖动的,但是在携带可拖动的时候不要。

我已尝试将鼠标悬停,鼠标中心,鼠标悬停,排序,分拣事件绑定,但没有运气。

那么,我的选择是什么?我需要修补jQueryUI,还是编写一个自定义的可拖动插件(从当前大量借用),还是有一种我更容易丢失的方法?

如果需要,我可以提供代码,但它非常简单。如果您需要其他详细信息并提前致谢,请告诉我们。

1 个答案:

答案 0 :(得分:1)

好的,所以我用2行补丁解决了这个问题。 将属性添加到可放置代码:

hoverable: false,

我是在第26行做到的。

然后,在第91行(上述版本)中,对检查接受的条件添加对该属性的检查:

if (this.accept.call(this.element[0],(draggable.currentItem || draggable.element)) || this.hoverable == true) {

然后,我做了我想要触发悬停事件的一个droppable而没有一个无关紧要的接受,但是设置hoverable:true。这允许您使其他DOM元素与Draggables交互,但不接受droppables。

不确定是否有其他人需要解决这个问题,但希望这会有所帮助。