如何将div拖放到另一个div中，并使整个元素跟随？

Question

Trying to use jqueryUI. I have a list with components that i want to drop inside a gridsystem. Like a desiger thing. I have a div that has

$( "#Component1" ).draggable();

And I drop the div above in this div:

$( "#GridDiv" ).droppable({
    accept: "#component1"
});

The result I want is, when I drop the component1 div insde the GridDiv

<div id="#GridDiv">
   <div id="#Component1"></div>
</div>

Is there a method for this ? i cant find it..

Answer 1

You have to move the element by yourself after drop event :

$( "#GridDiv" ).droppable({
    accept: "#Component1",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
    }
});

PS: You don't need to use # in the ID field:

<div id="GridDiv">
   <div id="Component1"></div>
</div>

Here is a working example

Answer 2

As there is a issue with the styling of the dragged element while appending to another div (see here for further information), here is another approach for you:

$('#GridDiv').droppable({
    accept: "#Component1",
    drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();
        draggable.appendTo( this ).offset( offset );
    }
});

Demo

The following demo is slightly different: it removes the original dragged element, so the dragging functionality gets lost:

$('#GridDiv').droppable({
    accept: "#Component1",
    drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();
        draggable.remove().appendTo( this ).offset( offset );
    }
});

Demo 2

For resizing the draggable after it is dropped you can use:

draggable.resizable();

Demo 3

Reference

.offset()

.appendTo()

.droppable() - drop-option

.remove()

Answer 3

The above all are not a correct and exact answer because the all the outputs are placed top of the window, eg, the object placed in top:0px and left:0px position. Try below

var droppable = $(this);
var draggable = ui.draggable;
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });