jquery - 可拖出表格的角度数据表列

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 的包装器，提供指令并确保 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/