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/

Answer 2

我认为您的问题是尝试使用类本身，当droppable有自己的悬停事件时，称为over jQuery droppable API #over

所以你想要：

$(".DropItem").droppable({
    tolerance: "touch",
    over: function(event, ui) {
        // ... logic goes here
    }
});

Answer 3

其他答案正是我所寻找的。但是，我想在此处进一步详细介绍如何处理逻辑的更好示例。

让我们举例来说，有一些简单的HTML如下。这个HTML基本上有4个可拖动的对象，以及4个可能的放置目标：

<div style="margin-bottom:20px;">
    <div data-id="1" class="DragItem">I am 1</div>
    <div data-id="2" class="DragItem">I am 2</div>
    <div data-id="3" class="DragItem">I am 3</div>
    <div data-id="4" class="DragItem">I am 4</div>
</div>
<div>
    <div data-id="123" class="DropItem">I accept 1, 2 and 3</div>
    <div data-id="23" class="DropItem">I accept 2 and 3</div>
    <div data-id="34" class="DropItem">I accept 3 and 4</div>
    <div data-id="1234" class="DropItem">I accept all</div>
</div>

可以看出，我使用data-*属性来存储特定的标识值。 DragItem上的ID标识拖动对象，DropItem上的ID包含所有有效值。

处理此逻辑的javascript，然后应用正确的类如下：

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

$(".DropItem").droppable({
    tolerance: "touch",
    over: function (event, ui) {
        var dropItem = $(this);
        var dragItem = $(ui.draggable);
        var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1;
        if (valid) {
            dropItem.addClass("DropTargetValid");
        } else {
            dropItem.addClass("DropTargetInvalid");
        }
    },
    out: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    },
    deactivate: function (event, ui) {
        var dropItem = $(this);
        dropItem.removeClass("DropTargetValid");
        dropItem.removeClass("DropTargetInvalid");
    }
});

可以看出，我正在做一个简单的“字符串包含”逻辑检查。这适用于小数字，但如果需要执行超过9个对象，我们需要在DropItem data-id值中使用更可靠的字符串。

我还使用out和deactivate事件来清理应用的类。在这个例子中，我复制了代码，但是这很容易被两个事件使用的单个函数替换。

最后，你们等待的那一刻，here is a working example.

Answer 4

使用可拖动的开始/停止事件向您的下拉区域添加和删除类。

http://api.jqueryui.com/draggable/#event-start

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

4 个答案: