jQuery UI 使用 .droppable 放入 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

您可以使用传递给 over 回调函数的 ui 元素的 .draggable 属性来找到正在拖动的项目，如下所示指定于 docs 。像这样:

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

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

Here's an updated jsFiddle 。

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