angular-datatable列可拖出表格

Question

是否可以避免列，而不是拖出数据表视图区域，因为你可以自己弄清楚，我在这个链接中谈论的是什么 https://l-lin.github.io/angular-datatables/#/withColReorder

当您尝试将列拖远到数据表时。 我在官方组件网站上提出了这个问题 https://github.com/l-lin/angular-datatables/issues/496

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

Answer 1

正如 l-lin 所指出的，angular-datatables是jQuery dataTables的包装器，提供指令并确保dataTable不与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>元素之外，它只是不将事件传递给原始函数 - 通过有效地阻止向外拖动列。

angular-datatables演示 - ＆gt;的 http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

纯jQuery dataTables演示 - ＆gt; http://jsfiddle.net/0boznoh7/