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

Question

I have an html page with some images that are being dragged and a set of divs that are not available. Everything works fine using the code below, but I can't figure out how I can REMOVE ITEM from droppable area after deleting it. (let's say the user changes his mind.)

I need some kind of behavior if you pull an item out of a deleteable area that it will remove from the droppable area. I expected this to be a 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 a way to support the behavior so that I can remove elements from droppable (do I need to make it draggable?), Which seems strange and redundant for such a simple and basic function that I think.

Answer 1

I would use the droppable event to remove the drag as follows:

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 do not think this is a standard feature with jQuery UI , however, these are a few examples. (Assuming your original images will be cloned by drag and drop)

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 really depends on what you want to do. Currently, when you delete draggable, you are creating a clone that does not have any functionality behind it - so it will not move after that.

I think what you are trying to do, I did here: http://jsfiddle.net/RDg9B/1/ - the user is dragging and dropping to the container; if he changes his mind, he will pull him out of the container.

As a rule, however, when developing the user interface, I use a garbage container to which the user can move unwanted elements - they can either disappear or return to their original position (adding the droppable function to document.body difficult)

As an addition, here is a fiddle with clones (which is a pretty logical and expected behavior: D)! http://jsfiddle.net/RDg9B/2/

Answer 4

You can try sorting sortable () in your container with the option to delete. I tried something like this: http://jsbin.com/axegem/105/

Hope this helps