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 draggabl

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

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 :

Answer 3

Better to use drop in stead of over

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

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