jquery拖拽排序控件DragSort，支持滚动条出现 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>DragSort Example</title>
 5 <meta charset="utf-8" />
 6 <style type="text/css">
 7 body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; } 
 8 ul { margin:0px; padding:0px; margin-left:20px; }
 9 #list2 { width:350px; list-style-type:none; margin:0px; }
10 #list2 li { float:left; padding:5px; width:100px; height:100px; }
11 #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
12 
13 placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
14 </style>
15 </head>
16 <body>
17 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
18 <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
19 
20 <div id="list_div" style="width:500px ;height:260px;overflow:auto">
21 <ul id="list2">
22 <li><div>10</div></li>
23 <li><div>11</div></li>
24 <li><div>12</div></li>
25 <li><div>13</div></li>
26 <li><div>14</div></li>
27 <li><div>15</div></li>
28 <li><div>16</div></li>
29 <li><div>17</div></li>
30 <li><div>18</div></li>
31 </ul>
32 </div>
33 <!-- save sort order here which can be retrieved on server on postback -->
34 <input name="list1SortOrder" type="hidden" />
35 
36 <script type="text/javascript">
37 $("#list2").dragsort({ 
38 dragSelector: "div", 
39 dragBetween: true,
40 dragEnd: saveOrder, 
41 placeHolderTemplate: "<li class='placeHolder'><div></div></li>",
42 scrollContainer:$("#list_div")
43 });
44 
45 function saveOrder() {
46 var data = $("#list2 li").map(function() { return $(this).children().html(); }).get();
47 $("input[name=list1SortOrder]").val(data.join("|"));
48 };
49 </script> 
50 </body>
51 </html>

效果截图：




 

posted on 2018-09-30 10:58  编程Groot  阅读(363)  评论(0)    收藏  举报