程式碼一預覽: 複製程式碼 程式碼如下: 最好的jquery列表拖动排列自定义拖动层排列 <br>*{margin:0;padding:0;list-style-type:none;} <br>body{font-family:Arial;font-size:12pt;color:#333;} <br>h1{font-size:16pt;} <br>h2{font-size:13pt;} <br>/* demo */ <br>.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;} <br>.demo h2{margin:30px 0 20px 0;color:#3366cc;} <br>/* dragfunction */ <br>.dragfunction{margin:40px 0 0 0;} <br>.dragfunction dt{height:30px;font-weight:800;} <br>.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;} <br>/* dragsort */ <br>.dragsort-ver li{height:30px;line-height:30px;} <br>.dragsort{width:350px;list-style-type:none;margin:0px;} <br>.dragsort li{float:left;padding:5px;width:100px;height:100px;} <br>.dragsort div{width:90px;height:50px;border:solid 1px black;background-color:#E0E0E0;text-align:center;padding-top:40px;} <br>.placeHolder div{background-color:white!important;border:dashed 1px gray!important;} <br> jQuery列表拖动排列演示 简单的一组列表: 你猜 你不猜 你不猜你不猜 猜猜 你猜不猜 你猜不猜不猜 你不猜不猜 <br>$("ul:first").dragsort(); <br> 两组列表拖放:(无限组拖放) 10 11 12 13 14 15 16 17 18 1 2 3 4 5 6 7 8 9 <br>$("#list1, #list2").dragsort({ <br>dragSelector: "div", <br>dragBetween: true, <br>dragEnd: saveOrder, <br>placeHolderTemplate: "<li class='placeHolder'><div></div>", <br>scrollSpeed: 5 <br>}); <br><br>function saveOrder() { <br>var data = $("#list1 li").map(function() { <br>return <br>$(this).children().html(); <br>}).get(); <br>$("input[name=list1SortOrder]").val(data. join("|")); <br>}; <br> <br><br><div style="clear:both;"></div> <br><br><h2> Usage</h2> <br>$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li>" }); <br> <br><br> <br><dl class="dragfunction"> <br><dt>dragSelector</dt> <br><dd>CSS選擇器內的元素的列表項目的拖動手把。 , textarea, a[href]".</dd> <br><dt>dragEnd</dt> <br><dd>拖曳結束後將被呼叫的回呼函數.</dd> <br><dt>dragBetween</dt> <br><dd>設定為“true”，如果你要啟用多組清單之間拖曳選定的清單。 <br><dd>拖曳清單的HTML部分。 >CSS選擇器的元素，作為滾動容器，例如溢出的div設定為自動。它代表了速度，頁面拖曳某一項時，將滾動容器外，較高使用價值的是速度和較低的值是較慢的。 如果設定為"0"以停用滾動。預設值為"5".</dd> <br> </dd> </dl> <br><br><br> </div> <br>
