6

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 . .

Trevor
  • 16,080
  • 9
  • 52
  • 83
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • is there anything your looking for that my answer is lacking for it to be an accepted answer? I'll be happy to make changes or look into it some more if there is something that is missing. Just please let me know before the grace period ends. Thanks – Trevor Nov 26 '13 at 13:30
  • I like apaul34208's solution, however its currently not viable if you want to move draggables from one droppable to another. – Trevor Nov 26 '13 at 19:38

4 Answers4

6

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();
        });
    }
});
apaul
  • 16,092
  • 8
  • 47
  • 82
  • Great example, just a small comment. You need to check if the element has been added previously before fading out, if not you can remove the original one. Adding if ($(ui.draggable).hasClass('new')) fix this issue – jegumi Dec 26 '15 at 14:46
4

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/

Trevor
  • 16,080
  • 9
  • 52
  • 83
1

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/

eithed
  • 3,933
  • 6
  • 40
  • 60
0

You can try implemeting sortable() on your droppable container. I tried some thing like this: http://jsbin.com/axegem/105/

Hope this helps

PushCode
  • 1,419
  • 3
  • 15
  • 31