huyueshan

导航

js 实现拖拽排序 

 1 <!DOCTYPE>
 2 <html lang="zh-cn">
 3 
 4 <head>
 5      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6      <title>拖拽排序</title>
 7      <style>
 8           .sortable-ghost {
 9                opacity: 0.4;
10                background-color: #F4E2C9;
11           }
12 
13           .block__list li {
14                cursor: pointer;
15 
16           }
17      </style>
18 </head>
19 <!--      <link href="app.css" rel="stylesheet" type="text/css"/> 
20       -->
21 <!-- script src="./Sortable.js"></script> -->
22 <script src="https://cdn.bootcss.com/Sortable/1.8.3/Sortable.js"></script>
23 
24 <body>
25      <ul id="foo" class="block__list block__list_words">
26           <li>1</li>
27           <li>2</li>
28           <li>3</li>
29           <li>4</li>
30           <li>5</li>
31           <li>6</li>
32           <li>7</li>
33           <li>8</li>
34      </ul>
35      <script>
36           Sortable.create(document.getElementById('foo'), {
37                animation: 150, //动画参数
38                onAdd: function (evt) {   //拖拽时候添加有新的节点的时候发生该事件
39                     console.log('onAdd.foo:', [evt.item, evt.from]);
40                },
41                onUpdate: function (evt) {  //拖拽更新节点位置发生该事件
42                     console.log('onUpdate.foo:', [evt.item, evt.from]);
43                },
44                onRemove: function (evt) {   //删除拖拽节点的时候促发该事件
45                     console.log('onRemove.foo:', [evt.item, evt.from]);
46                },
47                onStart: function (evt) {  //开始拖拽出发该函数
48                     console.log('onStart.foo:', [evt.item, evt.from]);
49                },
50                onSort: function (evt) {  //发生排序发生该事件
51                     console.log('onSort.foo:', [evt.item, evt.from]);
52                },
53                onEnd: function (evt) { //拖拽完毕之后发生该事件
54                     console.log('onEnd.foo:', [evt.item, evt.from]);
55                }
56           });
57      </script>
58 </body>
59 
60 </html>

 

posted on 2019-03-04 10:29  huyueshan  阅读(7327)  评论(0)    收藏  举报