Jquery UI Droppable：如何根據某些邏輯使用不同的hoverClass值？

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

我覺得你的問題是試圖與類本身，當可放開有自己的懸停事件做了，叫overjQuery 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

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

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