jquery-ui - 如何使 jQuery UI droppable hoverClass 仅适用于 draggables?

标签 jquery-ui hover draggable jquery-ui-sortable droppable

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

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

我在可转换对象上应用悬停类:

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

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

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

这是一个说明问题的 fiddle (将 draggables 拖到 sortables 上,重新排序 sortables):http://jsfiddle.net/TWXeH/

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

最佳答案

您正在寻找接受选项

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

关于jquery-ui - 如何使 jQuery UI droppable hoverClass 仅适用于 draggables?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15363717/

相关文章:

javascript - 制作类似谷歌日历的拖动界面

javascript - Raphael.draggable 不再适用于 Raphael

javascript - 即使放入错误的可放置对象,如何禁用可拖动对象

javascript - 添加图像,同时从另一个 UL 动态地将元素添加到无序列表

css - 将一个 div 悬停在另一个 div 后面

vuejs2 - vue-draggable 无法禁用

jquery - 如何找出页面已加载的百分比以更新 jQuery UI 进度条?

jquery - 单击显示子菜单但隐藏其他子菜单

javascript - 从悬停更改为单击?

带有嵌套元素的 jQuery 悬停事件