<title>jQuery UI 排序（Sortable） - 处理空列表</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } $( "ul.droptrue" ).sortable({ $( "ul.dropfalse" ).sortable({ $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">可被放置到..</li>
<li class="ui-state-default">..一个空列表中</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 id="sortable2" class="dropfalse">
<li class="ui-state-highlight">不可被放置到..</li>
<li class="ui-state-highlight">..一个空列表中</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
<ul id="sortable3" class="droptrue">