5

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

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

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

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

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

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

4 回答 4

3 
$(".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/

于 2013-03-05T14:14:11.540 回答
2

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

所以你会想要：

$(".DropItem").droppable({
    tolerance: "touch",
    over: function(event, ui) {
        // ... logic goes here
    }
});
于 2013-03-05T14:18:38.367 回答
2

其他答案正是我想要的。但是，我想在这里更详细地介绍如何处理逻辑的更好示例。

例如，有一些简单的 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 个对象，我们需要在 DropItemdata-id值中使用更可靠的字符串。

我还使用outanddeactivate事件来清除应用的类。在此示例中，我复制了代码，但这可以很容易地替换为两个事件都使用的单个函数。

最后，在大家一直在等待的那一刻，这里有一个工作示例。

于 2013-03-05T14:46:36.280 回答
0

使用 Draggable Start/Stop 事件向您的放置区添加和删除类。

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

于 2013-03-18T21:19:41.987 回答