JQuery is being dragged into a new container

Question

I have a div inside the parent div that users can drag from dropbox to final_dest. Users can also create new items using the button. Clicking the button adds a new div to Dropbox.

<div id='#dropbox'> <div id='item_1'>Some Item</div> </div> <div id='final_dest'></div> 

If the user drags item_1 to another container, how can I remove it from dropbox and put it in final_dest?

  $('#item_'+a).draggable({ // make this whole damn thing draggable drag:function(event){ helper:"clone", jsPlumb.repaintEverything(); }, stop:function(event,ui){ $('this').detach('#dropbox'); $('this').append('final_dest'); } }); 

I tried using detach, but can't figure out how to remove it from the divbox.

The problem is that the user drags item_1 to final_dest and then creates a new item_2 div element that appears under item_1 in dropbox. I am trying to make it appear where item_1 is. It does this because item_1 is not removed from dropbox.

Answer 1

You will need to collect the source and target elements, call disconnect, install css and call your append with the drop event attached to your containers as follows:

 $(".droppable").droppable({ accept: ".draggable", drop: function (event, ui) { var dropped = ui.draggable; var droppedOn = $(this); $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); } }); 

A full working example can be found here for you:

https://jsfiddle.net/gdkx7861/1/