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

​

Answer 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.

---

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.

Answer 2

Better to use drop in stead of over

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

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

Answer 3

Delete the elements in droppable area by implementing the following JS Code :-

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

See the result :