jQuery UI Sortable Options

by MoonScript

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<div class="demo">
    <div id="instructions">
        <p>Move your mouse over here as you drag up and down.</p>
        <p>The yellow placeholder will not move along with your mouse.</p>
    </div>
    <ul id="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>
        <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: 210px;}
#sortable {position: absolute; top: 20px; left: 200px; list-style-type: none; margin: 0; padding: 0; width: 60%;}
#sortable 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

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