rowReorder scrambles rows on fast mouse move
rowReorder scrambles rows on fast mouse move
When using the rowReorder extension, if you quickly drag a row from one point to another across several rows, the intervening rows tend to get scrambled. This is because rowReorder is swapping the moved row and the target row to action the move. This works as you would expect for a single row move, or if you move the mouse slowly. If you move quickly, some of the intervening rows are skipped which then means their order also changes.
I have modified the dataTables.rowReorder.js file to preserve the order of intervening rows (even on fast mouse moves). The code isn't ideal, but it does work. It would be good if this could be updated on the official release. The section to update is around line 367 on the _mouseMove function:
// Perform the DOM shuffle if it has changed from last time
while (this.s.lastInsert === null || this.s.lastInsert !== insertPoint) {
var slideInsertPoint = insertPoint;
if (insertPoint === 0) {
this.dom.target.prependTo( body );
}
else {
var nodes = $.unique(dt.rows({ page: 'current' }).nodes().toArray());
if (insertPoint > this.s.lastInsert) slideInsertPoint = this.s.lastInsert + 1;
else if (insertPoint < this.s.lastInsert) slideInsertPoint = this.s.lastInsert - 1;
if ( slideInsertPoint > this.s.lastInsert ) {
this.dom.target.before( nodes[slideInsertPoint-1 ] );
}
else {
this.dom.target.after( nodes[ slideInsertPoint ] );
}
}
this._cachePositions();
this.s.lastInsert = slideInsertPoint;
}
In the original, this was an "if" block, but I have changed it to a while and instead swap rows one at a time until reaching the target insertPoint. It's not a very complicated change, but it does work quite well. The scrambling no longer occurs and moves never switch the order of intervening rows.