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

Question

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

Answer 1

好问题。绝对没有关于此问题的文档（在撰写本文时）。调查代码的结果是：

在 RowReorder 拖放之后实际上触发了一个事件，row-reorder.dt。这传递了 3 个参数，我敢称之为 dragEvent、data 和 nodes.

dragEvent,基本jQueryUI事件
data，包含关于行重新排序的最重要信息的数组，对于每个项目 oldPosition、newPosition 和 node 本身。
nodes，DOM个节点/<tr>个元素参与拖放事件。

所以，一个用法示例：

$('#example').on('row-reorder.dt', function(dragEvent, data, nodes) {
    alert('row #'+
          data[0].node._DT_RowIndex+
          ' moved from pos '+
          data[0].oldPosition+
          ' to pos '+
          data[0].newPosition+"\n"+
          'row #'+
          data[1].node._DT_RowIndex+
          ' changed position from '+
          data[1].oldPosition+
          ' to '+
          data[1].newPosition          
    );
})

演示 -> http://jsfiddle.net/0f9Ljfjr/

Answer 2

SOLUTION

使用 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);
   });
});

DEMO

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

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

Event when drag starts and ends in jQuery DataTables RowReorder

jquery

datatables