jQuery UI Sortable Options

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="demo">
    <div id="instructions">
        <p>Move your mouse over here as you drag up and down.</p>
        <p>&nbsp;</p>
        <p>The yellow placeholder will move along with your mouse (<a href="http://bugs.jqueryui.com/ticket/8274">fix #8274</a>), as long as you don't try to drag the item to the other list.</p>
    </div>
    <ul id="sort-a" class="sortable-ul">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
    </ul>
    <ul id="sort-b" class="sortable-ul">
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
    </ul>
</div>

CSS

#instructions {position: absolute; top: 20px; left: 20px; border: 1px dashed #ccc; width: 80px; padding: 30px 50px 0; font-size: 12px; height:295px;}
#sort-a {top: 20px; border: 1px solid red;}
#sort-b {top: 240px; border: 1px solid blue;}
.sortable-ul {position: absolute; left: 205px; list-style-type: none; margin: 0; padding: 0; width: 60%;}
.sortable-ul li {cursor: move; margin: 0 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
html>body #sortable li {height: 1.5em; line-height: 1.2em;}
.ui-state-highlight {height: 1.5em; line-height: 1.2em;}
.handle {cursor: move; float: left; margin-right: 5px; width: 15px; height: 100%;}

JavaScript

$('#sort-a,#sort-b').sortable({
    placeholder: 'ui-state-highlight',
    axis: 'y',
    cursor: 'move',
    opacity: 0.65,
    tolerance: 'pointer',
    connectWith: '.sortable-ul'
});