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.

Answer 1

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

see Demo in JSFiddle