JQuery UI removes an item when discarded in a div using .droppable

Question

I am trying to understand the logic of how to do this.

I have a lot of images with just the CSS class name, they are created dynamically.

These images are dragged using jQuery UI .draggable.

I need to have a "recycle bin" that when an item is dragged, it is deleted.

Example : http://jsfiddle.net/KWdcU/3/ (Set to remove all items, not those that were dragged into it)

The 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

, .draggable ui, over, . :

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

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

jsFiddle.

---

drop, over, , .

Answer 2

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

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

Answer 3

Remove items in the reset area by applying the following JS code: -

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

See the result: