javascript - How to drag and drop a div inside another div and make that the whole element follow? - Stack Overflow

Trying to use jqueryUI. I have a list with ponents 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: "#ponent1"
});

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

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

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

Trying to use jqueryUI. I have a list with ponents 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: "#ponent1"
});

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

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

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

• javascript
• jquery
• jquery-ui
• drag-and-drop

Share Follow edited Mar 23, 2015 at 13:27 empiric 7,87877 gold badges3838 silver badges4949 bronze badges asked Mar 23, 2015 at 13:19 user3510507user3510507 10511 gold badge33 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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()

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' });