CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppable
Wyck
Wyck

Reputation: 2023

jQuery UI remove element when dropped into a div using .droppable

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

​

Upvotes: 6

Views: 33111

Answers (3)

Shubham Gupta
Shubham Gupta

Reputation: 331

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 : Result

Upvotes: 0

Simen Echholt
Simen Echholt

Reputation: 11293

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.

Upvotes: 18

kdureidy
kdureidy

Reputation: 960

Better to use drop in stead of over

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

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

Upvotes: 10

Related Questions