Jquery draggable attach to new container

Question

I have a div inside a parent div that users can drag from dropbox to final_dest. Users can also create new items with a button click. The button click appends the new div to dropbox.

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

<div id='final_dest'></div>

If a 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 have tried using detach but can not figure out how to remove it from dropbox div.

The problem is if a user drags item_1 to final_dest, and then creates a new item_2 div, it appears below item_1's spot in dropbox. i am trying to get it to appear where item_1 did. It does this, because item_1 is not removed from dropbox.

Answer 1

You will need to gather your origin and destination elements, call the detach, set css, and call your append on the drop event attached to your containers like so:

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

Full working example can be found here for you:

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