jQuery UI Trac #8572

Edit of http://jsfiddle.net/Zvvpt/15/ No need to drag items outside of sortable elements.

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">
             <div class="sortableItem">SortbleItem 1</div>

            <div class="sortableItem">SortbleItem 2</div>
            <div class="sortableItem">SortbleItem 3</div>
            <div class="sortableItem">SortbleItem 4</div>
            <div class="sortableItem">SortbleItem 5</div>
        </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,
                distance: 10,
                containment: 'document'
            }).disableSelection();
        });