SO fiddle

Test Fiddle mainly for SO Questions

by juErik

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<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 class="droppable ui-widget-header">
    <p>Drop here</p>
</div>

CSS

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

JavaScript

$(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        drop: function( event, ui ) {
            console.log('drop');
            $(ui.draggable).draggable("destroy");
            $(this).droppable("destroy");
        }
    });
});