jQuery.tablednd.js是一款非常實用的jQuery插件,能夠很方便地實現表格行的拖拽排序和拖拽移動。
該插件的使用非常簡單,只需在HTML頁面中引入jquery.tablednd.js文件,并在需要實現拖拽功能的表格上調用tableDnD()方法即可。
<!-- 引入jquery庫 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jquery.tablednd.js --> <script src="jquery.tablednd.js"></script> <script> $(function(){ $('#table1').tableDnD({ onDrop: function(table, row) { // 拖拽結束后的回調函數 } }); }); </script>
除了基本的拖拽排序和移動功能,jQuery.tablednd.js還提供了豐富的配置選項,如設置拖拽時的外觀、設置禁止拖拽的行等等。
<script> $(function(){ $('#table1').tableDnD({ dragClass: "myDragClass", onRowDrop: function(table, row) { // 拖拽結束后的回調函數 }, onDragStart: function(table, row) { // 拖拽開始前的回調函數 }, onDragClass: function(table, row) { // 拖拽時的回調函數 }, onDrop: function(table, row) { // 拖拽結束后的回調函數 }, onDragStop: function(table, row) { // 拖拽停止后的回調函數 }, only: '.sortable' // 只允許拖拽class為sortable的行 }); }); </script>
總體來說,使用jQuery.tablednd.js能夠大大提高表格排序和移動的交互性,使得用戶操作更加友好。該插件的文檔詳盡清晰,使用也非常簡單,建議大家在需要實現拖拽功能的時候使用。