使用 .droppable 拖放到 div 中时，jQuery UI 删除元素答案

【问题标题】：jQuery UI remove element when dropped into a div using .droppable使用 .droppable 拖放到 div 中时，jQuery UI 删除元素
【发布时间】：2012-04-05 12:26:11
【问题描述】：

我正在试图弄清楚如何做到这一点的逻辑。

我有很多只有 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();
          }
    });

【问题讨论】：

标签： jquery jquery-ui draggable droppable

【解决方案1】：

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

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

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

Here's an updated jsFiddle。

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

【讨论】：

谢谢，那是我的阅读理解失败，'drop' 的好主意。
ui.draggable.remove() 也可以（不带$(...)）
我发现了这个错误：我尝试回答你的答案 0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“删除”

【解决方案2】：

最好使用 drop 而不是 over

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

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

【讨论】：

同意，drop 比 over 更加用户友好和自然

【解决方案3】：

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

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

查看结果：

【讨论】：