html拖动元素排序(插件版)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="../js/jquery-1.9.1.min.js"></script> 6 <script src="../js/jquery-ui.min.js"></script> 7 <title></title> 8 <style> 9 #divBody{ 10 border: 1px solid; 11 width: 200px; 12 } 13 label{ 14 display: block; 15 margin: 5px 0px; 16 background-color:#d3e3f8; 17 width: 100%; 18 } 19 </style> 20 <script type="text/javascript"> 21 $(function(){ 22 //拖动排序 23 $("#divBody").sortable({ 24 update: function (event, ui) { 25 var idList = $(this).sortable("toArray", { attribute: "data-id" }); 26 console.log(idList); 27 } 28 }); 29 $("#divBody").disableSelection(); 30 31 }); 32 33 </script> 34 </head> 35 <body> 36 <div id="divBody"> 37 <label draggable="true" data-id="1">模块一</label> 38 <label draggable="true" data-id="2">模块二</label> 39 <label draggable="true" data-id="3">模块三</label> 40 <label draggable="true" data-id="4">模块四</label> 41 <label draggable="true" data-id="5">模块五</label> 42 <label draggable="true" data-id="6">模块六</label> 43 <label draggable="true" data-id="7">模块七</label> 44 <label draggable="true" data-id="8">模块八</label> 45 <label draggable="true" data-id="9">模块九</label> 46 <label draggable="true" data-id="10">模块十</label> 47 </div> 48 </body> 49 </html>
PS: JS引用地址：https://blog-static.cnblogs.com/files/xy0710/jquery-ui.min.js
