使用.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(); } }); }); 的回调函数，如docs中所述。像这样：

drop

Here's an updated jsFiddle。

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

< / p>

Answer 2

最好使用drop而不是

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

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

Answer 3

通过实现以下JS代码删除可放置区域中的元素：-

$(document).on('click', '.ui-draggable', function(){
  if(confirm('Do you want to delete ?')){
    $(this).remove();
  }
});

查看结果：