如何使 jQuery UI droppable hoverClass 仅适用于可拖动对象?

Posted

技术标签:

【中文标题】如何使 jQuery UI droppable hoverClass 仅适用于可拖动对象?【英文标题】:How to make jQuery UI droppable hoverClass work only with draggables? 【发布时间】:2013-02-28 02:42:45 【问题描述】:

我有一个可排序和可放置的列表,还有一组单独的可拖动对象:

ul.sortable
    li.droppable
    li.droppable
    li.droppable
/ul
ul
    li.draggable
    li.draggable
    li.draggable
/ul

我在 droppables 上应用了一个悬停类:

$(".droppable").droppable( hoverClass: "hover" );

悬停应该是用户的视觉提示,告诉他可以将可拖动对象拖放到可放置对象上。

问题在于悬停类也适用于可放置元素悬停在可排序元素上的情况。在这种情况下,视觉提示是完全错误的。

这是一个说明问题的小提琴(将可拖动对象拖到可排序对象上,重新排序可排序对象):http://jsfiddle.net/TWXeH/

如何使悬停类仅在可拖放对象上有可拖动对象时才起作用,而对于可排序对象则不起作用?

【问题讨论】:

【参考方案1】:

您正在寻找接受选项

$(".droppable").droppable(
    hoverClass: "hover",
    accept: ".draggable"
);

【讨论】:

以上是关于如何使 jQuery UI droppable hoverClass 仅适用于可拖动对象?的主要内容,如果未能解决你的问题,请参考以下文章