angular-datatable 列可拖出 table

Question

能不能避开列，不拖出data-table查看区，自己看吧，我说的这个link https://l-lin.github.io/angular-datatables/#/withColReorder

当您尝试将列拖到远离 data-table 的位置时。我已经在官方组件网站上提出了这个问题 https://github.com/l-lin/angular-datatables/issues/496

（以防出现问题，更好地解释我在说什么）

Answer 1

正如 l-lin 指出的那样，angular-datatables 是 jQuery 数据表的包装器，提供指令并确保数据表不与 angular。要更改核心功能，您仍然必须更改核心。

您可以通过猴子修补更改 dataTables 核心库中的许多内容。要防止将列 header 拖到 table 的 <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 演示 -> http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

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

angular-datatable 列可拖出 table

angular-datatable column draggable out of the table

jquery

datatables

angularjs

angular-datatables