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

Question

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

我有很多只有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

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