jQuery UI 使用 .droppable 放入 div 时删除元素

我正在尝试找出如何做到这一点的逻辑。

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

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

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

Example: http://jsfiddle.net/KWdcU/3/（这设置为删除所有元素，而不是拖入其中的元素）

Code:

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

​

您可以使用以下命令找到正在拖动的项目.draggable的财产ui元素被传递给回调函数over，如指定docs。像这样：

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

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

这是更新的 jsFiddle.

---

From a usability standpoint, I'd recommend using the drop event rather than the over event, as it would be annoying to delete an item by dragging it unintentionally over the trashcan.