角度数据表列可拖出表格

是否可以避免该列，而不是拖出数据表视图区域，正如您可以自己看出的那样，我从此链接中谈论的内容https://l-lin.github.io/angular-datatables/#/withColReorder

when you try to drag a column far from data-table. I have raised the issue in the official component site https://github.com/l-lin/angular-datatables/issues/496

（以防万一提出问题，更好地解释我正在谈论的内容）

As l-lin指出，Angular-DataTables 是 jQuery DataTables 的包装器，提供指令并确保 DataTables 不与 Angular 冲突。要更改核心功能，您仍然必须更改核心。

您可以通过猴子修补来更改 dataTables 核心库中的许多内容。防止将列标题拖到范围之外<thead>表格的一部分，您可以执行以下操作：

var old_fnMouseMove = $.fn.DataTable.ColReorder.prototype._fnMouseMove;
$.fn.DataTable.ColReorder.prototype._fnMouseMove = function(e) {
    var x = e.clientX, 
        y = e.clientY, 
        r = document.querySelector('#example thead').getBoundingClientRect(),
        within = (x>r.left && x<r.right && y>r.top && y<r.bottom);

    if (within) old_fnMouseMove.apply(this, arguments);
}

当拖动正在进行时，上面的代码会覆盖 ColReorders mousemove 事件。如果鼠标位于范围之外<thead>元素它只是不将事件传递给原始函数 - 这样就可以有效地防止将列拖到外面。

角度数据表演示 ->http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

纯 jQuery 数据表演示 ->http://jsfiddle.net/0boznoh7/