<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

​

<div id="main" style="height: 479px;">

    <p>Draggable connected to both sortables below</p>

    <ul id="draggableListItems" class="draggable mainList">

        <li class="ui-state-highlight">Draggable Item</li>

    </ul>

    <p>Sortable connected to sortable below</p>

    <ul id="sortableToSortable" class="sortable mainList">

        <li class="ui-state-default">Sortable 1-1</li>

        <li class="ui-state-default">Sortable 1-2</li>

        <li class="ui-state-default">Sortable 1-3</li>

        <li class="ui-state-default">Sortable 1-4</li>

        <li class="ui-state-default">Sortable 1-5</li>

        <li class="ui-state-default">Sortable 1-6</li>

    </ul>

    <p>Sortable not connected to another sortable</p>

    <ul id="sortableOnly" class="sortable mainList">

        <li class="ui-state-default">Sortable 2-1</li>

        <li class="ui-state-default">Sortable 2-2</li>

        <li class="ui-state-default">Sortable 2-3</li>

        <li class="ui-state-default">Sortable 2-4</li>

        <li class="ui-state-default">Sortable 2-5</li>

        <li class="ui-state-default">Sortable 2-6</li>

    </ul>

</div>

​