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.