使用.droppable放入div中时，jQuery UI移除元素 [英] jQuery UI remove element when dropped into a div using .droppable

问题描述

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

I'm trying to figure out the logic of how to do this.

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

I have many images with only a CSS class name, they are created dynamically.

这些图像可使用jQuery UI的.draggable.

These images are draggable using jQuery UI's .draggable.

我需要有一个垃圾桶"，当将一个元素拖入时，它会被删除.

I need to have a "trash can" that when an element is dragged into , it is removed.

示例: http://jsfiddle.net/KWdcU/3/(这是设置为删除所有元素，而不是拖动到其中的元素)

Example: http://jsfiddle.net/KWdcU/3/ (This is set to remove all elements and not the one dragged into it)

代码:

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

推荐答案

您可以使用传递给over的回调函数的ui元素的.draggable属性，找到要拖动的项目，具体说明如下文档.像这样:

You can find the item being dragged by using .draggable property of the ui element being passed to the callback function of over, as specied in the docs. Like this:

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

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

这是更新的jsFiddle .

---

从可用性的角度来看，我建议使用drop事件而不是over事件，因为通过无意将其拖到垃圾桶上来删除它会很烦人.

Here's an updated 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.

这篇关于使用.droppable放入div中时，jQuery UI移除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！