jQuery - Change 'normal div' content on drop of 'draggable div'

Question

I have two div on my page.One is draggable and other is normal.

Draggable div:

<div id='draggable'>
     AAAAAA
</div>

Normal div:

<div id='dropbox'>
     BBBBBB
</div>

When 'draggable' div is dropped on 'dropbox' div, I want to append the contents of 'draggable' div to 'dropbox' div.

So after drop , the contents of 'dropbox' div should be:

AAAAAA
BBBBBB

Please guide me on how to do this using jQuery.

score 1 · Answer 1 · answered May 07 '12 at 10:21

1

$("#dropbox").droppable({
    drop: function(event, ui) {
        $(this).append(ui.draggable.html());
    }
})

answered May 07 '12 at 10:21

ilyes kooli

11,959
14
50
79

score 1 · Answer 2 · answered May 07 '12 at 10:22

Try with UI droppable

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html();
            }
        });
    });

http://jqueryui.com/demos/droppable/

score 1 · Accepted Answer · answered May 07 '12 at 10:22

$(function() {
        $( "#draggable" ).draggable();//your drag handler
        $( "#dropbox" ).droppable({ //your drop handler
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html() );
            }
        });
    });

see Demo in JSFiddle

score 0 · Answer 4 · answered May 07 '12 at 10:18

0

You can use drop event of droppable:

$("#dropbox").droppable({
    drop: function(event, ui) {
        $("<div></div>").text(ui.draggable.text()).appendTo(this);
    }
})

DEMO: http://jsfiddle.net/UrMrt/

answered May 07 '12 at 10:18

VisioN

143,310
32
282
281

can I please ask how to clone/append something from a get from the server like this... http://stackoverflow.com/questions/22086508/on-drop-clone-a-different-node-or-corresponding-element-from-the-server for e.g `drop: function(event, ui) { /* get DIV from server and append */.text(ui.draggable.text()).appendTo(this);` – aggie Jan 26 '16 at 18:48

jQuery - Change 'normal div' content on drop of 'draggable div'

4 Answers4