In

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 saw the position cordinates changing as I drag but showing that the parent of that dragged,dropped div was unchanged.

I think same happens with droppable /

Is there a way to check and be sure?

I do want this feature as I want to drag one div to another and later know the parent of that div.

In http://jqueryui./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 saw the position cordinates changing as I drag but showing that the parent of that dragged,dropped div was unchanged.

I think same happens with droppable http://jqueryui./droppable/

Is there a way to check and be sure?

I do want this feature as I want to drag one div to another and later know the parent of that div.

• javascript
• jquery
• jquery-ui
• dom

2 Answers 2

I got it working with Asad's help

http://jsfiddle/4bmT9/1/

and found this wonderful thing made by some one else

http://jsfiddle/l33r0y/yrLbE/48/

JS:

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

HTML:

<div id="source" class="box">
    <div class="dragme">bacon</div>

</div>
<div id="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/4bmT9/1/

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/VTHcG/