sortable.js table表格拖拽例子
查看教程
运行代码
PC模式
平板模式
手机模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sortable.js table表格拖拽例子</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script> <style> table { border-collapse: collapse; margin: 0 auto; text-align: center; width: 90%; } table td, table th { border: 1px solid #cad9ea; color: #666; height: 30px; } table thead th { background-color: #CCE8EB; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } </style> </head> <body> <table id="itxst"> <tbody data-id="1"> <tr> <td>1</td> <td>www.baidu.com</td> </tr> </tbody> <tbody data-id="2"> <tr> <td>2</td> <td>www.itxst.com</td> </tr> </tbody> <tbody data-id="3"> <tr> <td>3</td> <td>www.google.com</td> </tr> </tbody> <tbody data-id="4"> <tr> <td>4</td> <td>www.microsoft.com</td> </tr> </tbody> </table> <script> //获取对象 var el = document.getElementById('itxst'); //设置配置 var ops = { animation: 1000, //拖动结束 onEnd: function (evt) { console.log(evt); //获取拖动后的排序 var arr = sortable.toArray(); alert(JSON.stringify(arr)); } }; //初始化 var sortable = Sortable.create(el, ops); </script> </body> </html>
