jQury UI Sortable

by jquery4u

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<ul id="sortable">
    <li class="ui-state-default">
        <div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 1</div>
    </li>
    <li class="ui-state-default">
        <div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 2</div>
    </li>
    <li class="ui-state-default">
        <div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 3</div>
    </li>
    <li class="ui-state-default">
        <div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> 4</div>
    </li>
</ul>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}

JavaScript

$("#sortable").sortable({
    cancel: ".fixed"
});
$("#sortable").disableSelection();