实现效果:html
完整代码:动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sortable</title> <script src="js/sortable/Sortable.min.js"></script> <style> .sortable-ghost { opacity: 0.4; background-color: #F4E2C9; } </style> </head> <body> <div style="width: 300px;height: 200px;background-color: silver"> <div id="foo" style="height: 100%; overflow-y: auto"> <div style="height: 50px;width: 100px;background-color: red">1</div> <div style="height: 50px;width: 100px;background-color: blue">2</div> <div style="height: 50px;width: 100px;background-color: green">3</div> <div style="height: 50px;width: 100px;background-color: #FFB800">4</div> </div> </div> <p></p> <div style="width: 300px;height: 200px;background-color: #4E5465"> <div id="boo" style="height: 100%; overflow-y: auto"> <div style="height: 50px;width: 100px;background-color: red">5</div> <div style="height: 50px;width: 100px;background-color: blue">6</div> <div style="height: 50px;width: 100px;background-color: green">7</div> <div style="height: 50px;width: 100px;background-color: #FFB800">8</div> </div> </div> <script> Sortable.create(document.getElementById('foo'), { group:"words", animation: 150, //动画参数 }); Sortable.create(document.getElementById('boo'), { group:"words", animation: 150, //动画参数 }); </script> </body> </html>
参考文章.net
1,SortableJS中文网code
2,Sortable.js拖拽排序使用方法解析blog