JQuery表格行拖拽功能是一種非常實用的功能,它可以幫助我們在表格中很方便地調整行的位置。下面就讓我們來學習一下如何實現這個功能。
// jquery表格行拖拽功能的代碼 $(function() { var isDragging = false; var rowToMove; $('table tbody tr').on('mousedown', function(e) { rowToMove = $(this); isDragging = true; }); $(document).on('mousemove', function(e) { if(isDragging) { var targetRow = $(e.target).closest('tr'); if(targetRow.length && targetRow.index() !== rowToMove.index()) { rowToMove.insertAfter(targetRow); } } }); $(document).on('mouseup', function() { isDragging = false; }); });
以上代碼中,我們首先在鼠標按下時記錄下要拖拽的行,然后在鼠標移動的時候判斷鼠標的位置是否移到了其他行上,如果是,就把要拖拽的行移到當前行的下面。
最后,當鼠標彈起時,取消拖拽狀態。這樣,我們就完成了一個簡單的jquery表格行拖拽功能。
上一篇div embed標簽
下一篇div eq 1