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();
}
});
Better to use drop in stead of over
You can find the item being dragged by using
.draggable
property of theui
element being passed to the callback function ofover
, as specied in the docs. Like this:Here's an updated jsFiddle.
From a usability standpoint, I'd recommend using the
drop
event rather than theover
event, as it would be annoying to delete an item by dragging it unintentionally over the trashcan.