Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class="demo">
    
<ul id="draggables">
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 
<ul class="sortable" style="display: none;">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul class="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
 
</div>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; }
    .demo ul.sortable { float: right; width: 33.3%; }
    .demo li { margin: 0; margin-bottom: 5px; border-width: 5px; }
    .demo ul#draggables li { width: 150px; };
    .demo ul.sortable li { width: 100%; }

JavaScript

$(".sortable").sortable({
            forcePlaceholderSize: true,
            placeholder: 'ui-state-highlight',
            revert: true
        });
        $("#draggable").draggable({
            connectToSortable: '.sortable',
            helper: 'clone',
            revert: 'invalid'
        })
        $("ul, li").disableSelection();
        //$(".sortable:hidden").sortable('disable');