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>