Jquery UI Droppable:如何根据某些逻辑使用不同的hoverClass值？

Question

我正在使用JQuery UI可放置库功能,我想在将鼠标悬停在可放置目标上时提供可视用户反馈.为此,我可以轻松地使用该hoverClass选项指定当可拖动项目悬停时要使用的类.

但我想要做的是hoverClass根据某些逻辑使用不同的值.基本上,有许多区域是"可放置的",并且有许多项目可以拖放 - 但是,并非所有项目都可以放在所有区域上.例如,如果丢弃有效,我希望有绿色背景,如果丢弃无效,我希望有红色背景.

如何才能做到这一点？我知道我想要使用什么逻辑,但我在哪里可以添加逻辑.它显然需要在某个地方我可以访问被拖动的元素,以及潜在的drop target元素.

到目前为止我的简单代码如下:

$(".DragItem").draggable({
    revert: true,
    helper: "clone"
});

$(".DropItem").droppable({
    tolerance: "touch",
    hoverClass: "DropTargetValid"
});

Answer 1

$(".DropItem").droppable({
    tolerance: "touch",
    hoverClass: "DropTargetValid",
    over: function(event, ui) {
       console.log(ui.draggable); // the draggable object
       console.log($(this)); // the droppable object
    }
});

这应该可以做到。On over 该事件将在所有 .DropItem 元素上触发。您可以在此处找到有关可用事件 API 的更多信息： http: //api.jqueryui.com/droppable/