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