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