When using jquery-ui droppable, how can you remove an item from the droppable area after you have already dropped it?

Question

I have a html page with some images that are dragggable and a set of divs that are droppable. It all works fine using the below code but I can't figure out how i can REMOVE AN ITEM from the droppable area after its been dropped. (lets say the user changes their mind . .)

I want some behavior that if you drag an item out of the droppable area that it gets removed from the droppable area. I expected this to be the behavior out of the box but apparently not.

$(".draggable").draggable({ cursor: "move", revert: "invalid", helper: "clone" });

$(".droppable").droppable({
    hoverClass: "ui-state-active",
            drop: function (ev, ui) {
                $(this).append($(ui.draggable).clone());
            }
});

Is there anyway to support the behavior so I can remove items from a droppable (do i need to make it a draggable as well? that would seem odd and overkill for such a simple and basic feature I think . .

Answer 1

I would use droppable's out event to remove the draggables like so:

Working Example

$(".draggable").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});

$(".droppable").droppable({
    accept: '.draggable',
    hoverClass: "ui-state-active",
    drop: function (ev, ui) {
        if ($(ui.draggable).hasClass('new')) {
            $('.new').draggable({
                revert: true
            });
        } else {
            $(this).append($(ui.draggable).clone().draggable({
                helper: "original"
            }).addClass('new'));
        }
    },
    out: function (event, ui) {
        $(ui.draggable).fadeOut(1000, function () {
            $(this).remove();
        });
    }
});

Answer 2

I don't believe this is a feature that comes standard with jQuery UI the following are a couple examples though. (Assuming you want your original images to be cloned when dragged)

HTML

<div id="test">
     <div class="draggable">Image</div>
     <div class="draggable">Image2</div>
     <div class="draggable">Image3</div>
     <br>
     <br>
     <div class="droppable"></div>
     <div class="droppable"></div>
     <div class="droppable"></div>
</div> 

jQuery

var original = true;
var droppable = false;

$( ".draggable" ).draggable({
    helper : "clone",
    stop: function( event, ui ) {
        original = false;
    },
    start: function( event, ui ) {
        original = true;   
    }
});

$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        droppable = true;
        if(original){
            ui.helper.removeClass('ui-draggable-dragging');
            var newDiv = $(ui.helper).clone();
            newDiv.draggable({
                stop: function( event, ui ) {
                    if(!droppable)
                        ui.helper.remove();
                },
                start: function( event, ui ) {
                    droppable = false;    
                }
            });
            $(this).append(newDiv);
        }
        else
            $(this).append(ui.helper);
    }  
});

FIDDLE

http://jsfiddle.net/Bkk5F/3/

Alternative - Snappy version

http://jsfiddle.net/Bkk5F/2/

Answer 3

It truly depends on what you want to do. Currently, when you're dropping the draggable, you're creating a clone that doesn't have any functionality behind it - that's why it won't move afterwards.

I think what you're trying to do, I've accomplished here: http://jsfiddle.net/RDg9B/1/ - user drags the draggable to container; if he changes his mind, he drags it outside the container.

Generally however, when designing an UI, I've been using a trash container, to which user can move unwanted items - they can either disappear, or return to their original position (adding droppable functionality to document.body is tricky)

As an add-on here's the fiddle with clones (which is rather logical and expected behavior :D)! http://jsfiddle.net/RDg9B/2/