菜鸟学堂
在线运行
源代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <style> #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; } </style> <script> $(function() { $( "ul.droptrue" ).sortable({ connectWith: "ul" }); $( "ul.dropfalse" ).sortable({ connectWith: "ul", dropOnEmpty: false }); $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); }); </script> </head> <body> <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> <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> <ul id="sortable3" class="droptrue"> </ul> <br style="clear:both"> </body> </html>
运行结果
在线运行
菜鸟学堂 edu.jb51.net