jQuery UI remove element when dropped into a div u

2019-02-14 04:43发布

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

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

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.

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

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

2条回答
Luminary・发光体
2楼-- · 2019-02-14 05:38

Better to use drop in stead of over

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

    $('#trash').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
});
查看更多
\"骚年 ilove
3楼-- · 2019-02-14 05:42

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

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.

查看更多
登录 后发表回答