jQuery UI Trac #8574 - Review

Edit of http://jsfiddle.net/k4nn3/3/.

HTML

<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://elblawg.com/jqueryui-test/js/jquery-ui-10.0.js"></script>

<div id="sortableArea">
    <div class="sortable">
        <div class="sortable sortableItem">
             <div class="sortableItem">SortbleItem 1</div>

            <div class="sortableItem">SortbleItem 2</div>
            <div class="sortableItem">SortbleItem 3</div>
        </div>
        <div class="sortable sortableItem">
        </div>
    </div>
</div>

CSS

#draggable-items 
        {
            float:left;
            width:150px;
            margin-right:50px;
        }
        #sortableArea 
        {
            float:left;
            border:1px solid #000;
            width:500px;
            padding:10px;
        }
        
        .dragMe { background-color:#ccc; border:1px solid #eee; margin-bottom:10px; }
        
        .placeholder {  background-color: #fbec88 !important; height: 5px;}
        
        .sortable { border:1px solid #ccc; margin:10px; padding:10px; }
        .sortableItem { padding:10px; }

JavaScript

$(function () {
            $(".sortable").sortable({
                connectWith: ".sortable",
                forcePlaceholderSize: false,
                items: ".sortableItem",
                placeholder: 'placeholder',
                opacity: '.5',
                appendTo: "body",
                delay: 100,
                containment: 'document'
            }).disableSelection();
        });