Re-locating draggables

Instead of just change the position CSS properties on jQuery UI draggables, actually change the DOM structure.

by pradeep

HTML

<div class="draggable ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div class="draggable ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
</div>

CSS

.draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}

#droppable {
    width: 350px;
    height: 150px;
    padding: 0.5em;
    float: right;
    margin: 10px;
    background-image: none;
}

JavaScript

// Creates the draggable components.
$( ".draggable" ).draggable();

// Creates the droppable.
$( "#droppable" ).draggable({
    
    // Triggered when a draggable is dropped.
    drag: function (event, ui) {
        
        // Reset the CSS properties added by draggable and
        // append the element to the droppable.
        ui.draggable.css({
            position: "static",
            top: "auto",
            left: "auto"
        }).appendTo( this );
        
    }
    
});