jQuery draggable + droppable - Physically move dragged item into dropped container

Question

I need to be able to take an element that is set as draggable and physically move that element into the container as opposed to just overlaying it as the current functionality does.

So for example:

 <div class="container"></div>
 <div class="image">
    <img class="thumb" src="images/Koala.jpg" alt="" />
 </div>

 $(function () {
    $(".image").draggable();
    $(".container").droppable({
        drop: function (event, ui) {
            alert('dropped!');
        }
    });
 });

So after the image has been dragged and dropped into the 'container' div I need the actual html element to be moved there.

So after the event occurred, if I were to look at the source using Chrome's dev tools I would see:

 <div class="container">
    <div class="image">
        <img class="thumb" src="images/Koala.jpg" alt="" />
    </div>
 </div>

Is this possible?

Thanks

Answer 1

This should move the dragged element to the droppable in the dom tree.

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

Answer 2

In the drop function, $(this) is the droppable accepting the draggable, so just use .append() to add the draggable to the droppable: http://jsfiddle.net/saluce/P6TjC/

$(function () {
    $(".image").draggable({helper: 'original'});
    $(".container").droppable({
        drop: function (event, ui) {
            $(this).append(ui.draggable.css({position: 'static'}));
            alert('dropped!');
        }
    });
 });​