DRAG & SORT

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery.ui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<div class='items'>
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

<div class="content">
    <div class="block">Foo</div>
    <div class="block">Bar</div>
</div>

CSS

.items{float:left;}
.items div{width:50px;background:#444;color:#fff;margin-bottom:4px;padding:6px;text-align:center}

.content{width:500px;min-height:500px;background:#eee;position:absolute;left:70px;padding:10px}

.items .block,
.content .block{height:100px!important;background:#bbb;margin-bottom:10px;width:500px;color:#000}

/* style the sortable placeholder */
.content .block-placeholder{height:98px!important;border:1px dotted black;margin-bottom:10px;width:498px;}

JavaScript

$('.items div').draggable({
    helper: function(e) {
        return $('<div>').addClass('block').text( $(e.target).text() );
    },
    connectToSortable: ".content"
});
    
$('.content').sortable({
    placeholder: 'block-placeholder',
    update: function (event, ui) {
        // turn the dragged item into a "block"
        ui.item.addClass('block');
    }
});