javascript - Jquery UI 可放置 : How can I use different hoverClass values based on some logic?

Question

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

但我想做的是根据某些逻辑使用不同的 hoverClass 值。基本上，有许多区域是“可放置的”，并且有许多项目可以拖放 - 然而，并非所有项目都可以放置在所有区域上。因此，例如，如果转换有效，我想要一个绿色背景，如果转换无效，我想要一个红色背景。

如何做到这一点？我知道我想使用什么逻辑，但是我可以在哪里添加逻辑。它显然需要在某个地方，我可以访问被拖动的元素，以及潜在的放置目标元素。

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

$(".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
    }
});

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