jQuery UI刪除元素時，使用.droppable

Question

下降到一個div我想弄清楚如何做到這一點的邏輯。

我有很多隻有CSS類名稱的圖像，它們是動態創建的。

這些圖像拖動使用jQuery UI的.draggable.

我需要有一個「垃圾箱」，當元件拖入，它被刪除。

例：http://jsfiddle.net/KWdcU/3/（這是設置爲刪除所有的元素，而不是一個拖進它）

代碼：

<div class ="box"> 
<div class="stack">one</div> 
<div class="stack">two</div> 
</div> 
<div id="trash">trash</div>​ 



$(function() { 
     $(".stack").draggable(); 
}); 

$('#trash').droppable({ 
      over: function() { 
      //alert('working!'); 
      $('.box').remove(); 
      } 
    }); 

Answer 1

您可以找到該項目被.draggable屬性拖拽ui元素被傳遞給回調函數over，詳見docs。像這樣：

$(function() { 
    $(".stack").draggable(); 

    $('#trash').droppable({ 
     over: function(event, ui) { 
      ui.draggable.remove(); 
     } 
    }); 
}); 

Here's an updated jsFiddle。

---

從可用性的角度來看，我建議使用 drop事件而不是 over事件，因爲通過將其無意拖到垃圾箱上來刪除某個項目會很麻煩。

Answer 2

更好地在全球

$(function() { 
    $(".stack").draggable(); 

    $('#trash').droppable({ 
     drop: function(event, ui) { 
      $(ui.draggable).remove(); 
     } 
    }); 
});