jQuery DataTables RowReorder 中拖动开始和结束时的事件

Question

我正在实现jQuery DataTables RowReorder扩展，需要在拖动过程中对 DOM 进行更改，并在完成时停止该过程。我该如何实现这个目标？

Answer 1

解决方案

使用row-reorder事件来检测行何时被重新排序。

$('#example').on('row-reorder.dt', function(e, details, edit){   
   for(var i = 0; i < details.length; i++){
      console.log(
         'Node', details[i].node, 
         'moved from', details[i].oldPosition, 
         'to', details[i].newPosition
      );
   }
});

要跟踪行拖动事件，请使用未记录的事件mousedown.rowReorder，ousemove.rowReorder如下所示。

$('#example').on('mousedown.rowReorder touchstart.rowReorder', 'tbody tr td:eq(0)', function(){
   var tr = $(this).closest('tr');    
   console.log('Started dragging row', tr);

   $(document).on('mousemove.rowReorder touchmove.rowReorder', function(){
      console.log('Dragging row', tr);
   });
});

演示版

有关代码和演示，请参阅此 jsFiddle 。