当标题滚动接近边界时，DataTables ColReorder 滚动答案

【问题标题】：DataTables ColReorder scroll when header scrolled close to boundaries当标题滚动接近边界时，DataTables ColReorder 滚动
【发布时间】：2013-07-22 13:43:24
【问题描述】：

我正在使用 DataTables 处理从各种 ASP 数据库收集的大量数据。此外，我正在使用以下 DataTables 插件： FixedHeaders, FixedColumns, ColReorder.

现在，使用 ColReorder 函数，当标题（实际上是一列）被拖动以重新排序并溢出到两侧（水平滚动）时，我希望表格滚动到它的一侧，以便列不仅可以拖到表格的查看区域，还可以拖到整个表格。

我尝试了许多方法和解决方法，例如当光标靠近边界时尝试使其滚动（如“拖动滚动”http://javascriptmvc.com/docs.html#!jQuery.Drag 中的此处），但我没有成功，以及这种方法 - http://mootools.net/docs/more/Interface/Scroller.

非常感谢您的帮助。提前谢谢大家。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

这是一种可以让您更接近解决问题的方法。根据我的实验，您可以在函数_fnMouseMove 中的this.dom.drag.css(...) 代码之前复制和修改dataTables.colReorder.js。

var scrollLeftVal = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft();
if((e.pageX - this.s.mouse.offsetX) > (this.s.dt.nTableWrapper.clientWidth - 50)) {
  scrollLeftVal += 10;
  $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody').scrollLeft(scrollLeftVal);
}

这将在拖动列标题时向右滚动窗口。还需要一个 reverse 方法，以及修改指针和拖动元素的位置，如下所示：

this.dom.pointer.css( 'left', this.s.aoTargets[i-1].x - scrollLeftVal );

如果您决定采用这种方法，那么您最好长期构建扩展/插件，而不是修改核心代码。这仅用于实验目的。

我开始走这条路，但相信我会做我自己的重新排序界面，因为这种方法，即使工作和滚动正常，也不是我正在处理的项目的理想选择。

希望这可以帮助某人更接近解决方案！

瑞恩

【讨论】：

【解决方案2】：

用引导程序测试https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/

我通过在函数 _fnMouseMove 中修改 dataTables.colReorder.js 来添加此代码，就在 this.dom.drag.css(...) 之前似乎工作正常，但只有一个问题。长列很难捕捉到下一个短列。

例如：在 https://jsfiddle.net/bababalcksheep/gsf2r1v4/17/ 中，尝试将项目列拖到下一个 EXT 列。我怀疑这是因为项目列的宽度较大。

对此问题的任何进一步解决将不胜感激

var scrollHead = $(this.s.dt.nTableWrapper).find('.dataTables_scrollHead');
var scrollBody = $(this.s.dt.nTableWrapper).find('.dataTables_scrollBody');
var scrollLeftVal = e.pageX - scrollHead.parent().offset().left - this.s.mouse.offsetX;
//
var difference =  scrollHead[0].clientWidth  -  scrollLeftVal   ;
//is near Right edge, scroll to far right
if (difference < 150){
    scrollLeftVal = scrollHead[0].scrollWidth - scrollHead[0].clientWidth;// max scrollleft Value
}
//is near Left edge, scroll to far Left
if(scrollLeftVal < 100){
    scrollLeftVal= 0;
} 
//
scrollBody.scrollLeft(scrollLeftVal);

【讨论】：