jQuery UI remove element when dropped into a div using .droppable

Question

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

​

Solution 1

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.

---

drop

over

Solution 2

Better to use drop in stead of over

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

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

Comments

[Wyck]

Thanks, that was a reading comprehension fail on my part, good idea for the 'drop'.

[Dejv]

ui.draggable.remove() is also ok (without $(...))

[Sumit patel]

i fatch this error : i try to your answer 0x800a138f - JavaScript runtime error: Unable to get property 'remove' of undefined or null reference

[GoldenGonaz]

Agreed, drop is a lot more user friendly and natural than over