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
    }
});

這應該做到這一點。 在此過程中，將在所有.DropItem元素上觸發該事件。 您可以在此處找到有關可用事件API的更多信息： http ： //api.jqueryui.com/droppable/

Answer 2

我覺得你的問題是試圖與類本身，這樣做時，可放開有自己的懸停事件，呼吁over jQuery的投擲的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事件來清除應用的類。 在這個例子中，我復制了代碼，但是這可以很容易地被兩個事件使用的單個函數替換。

最后，在你等待的那一刻， 這是一個有效的例子。

Answer 4

使用可拖動的開始/停止事件向您的dropzones添加和刪除類。

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