Drag Drop And Change Parent Of A Div In Dom

In http://jqueryui.com/draggable/#snap-to If i drag a div to 'snaptarget' div. Will the dragged div be shown INSIDE it as its child element in the DOM? I hit f12 on browser and sa

Solution 1:

I got it working with Asad's help

http://jsfiddle.net/4bmT9/1/

and found this wonderful thing made by some one else

http://jsfiddle.net/l33r0y/yrLbE/48/

JS:

$('.dragme').draggable();
$('#drop, #source').droppable({
    drop:function(e, ui) {
        $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
    }
});

HTML:

<divid="source"class="box"><divclass="dragme">bacon</div></div><divid="drop"class="box"></div>

CSS:

.box { height:100px;width:100px;border:1px solid #333; }
.dragme { width:100%; margin:5px; border:1px solid #333; }

Here is a demonstration: http://jsfiddle.net/4bmT9/1/

Solution 2:

The dragged element is either duplicated or transplanted as a child of the drop target (depending on what you've selected for the helper option).

To state this more explicitly, there will be a DOM node under the droppable element that contains the draggable element.

EDIT:

It appears I was mistaken. This isn't default behavior, but you could do something like this:

$(".target").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        $(this).append(ui.draggable);
    }
});
$(".draggable").draggable();

Here is a demonstration: http://jsfiddle.net/VTHcG/