使用.droppable将jQuery UI删除到div中时删除元素

我试图找出如何做到这一点的逻辑。

我有很多只有CSS类名的图像，它们是动态创建的。

这些图像可以使用jQuery UI的.draggable.进行拖动.draggable.

我需要一个“垃圾桶”，当一个元素被拖入时，它被删除。

示例 ： http ： //jsfiddle.net/KWdcU/3/ （设置为删除所有元素而不是拖入其中的元素）

代码 ：

 
 
one
 
two
 
 
trash
​ $(function() { $( ".stack" ).draggable(); }); $('#trash').droppable({ over: function() { //alert('working!'); $('.box').remove(); } }); 

Answer 1

您可以使用传递给over的回调函数的ui元素的.draggable属性来查找正在拖动的项目，如文档中所指定。 像这样：

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

这是一个更新的jsFiddle 。

---

从可用性的角度来看，我建议使用drop事件而不是over事件，因为通过无意中拖动垃圾桶来删除项目会很烦人。

Answer 2

最好使用drop而不是over

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