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

Posted 2023-05-08

【中文标题】使用 .droppable 拖放到 div 中时，jQuery UI 删除元素

【英文标题】：jQuery UI remove element when dropped into a div using .droppable

【发布时间】：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();
          
    );

​

【参考方案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();
  
);

查看结果：