角度数据表列可拖出表格 [英] angular-datatable column draggable out of the table

问题描述

是否可以避免列，而不是拖出数据表视图区域，正如您可以自己从这个链接中所说的那样当您尝试将列拖离数据表很远时.我在官方组件站点上提出了这个问题https://github.com/l-lin/angular-datatables/issues/496

(以防万一出现问题，更好地解释我在说什么)

解决方案

正如 l-lin 指出的，angular-datatables 是 jQuery dataTables 的包装器，提供指令并确保 dataTables 不与棱角分明.要更改核心功能，您仍然必须更改核心.

您可以通过猴子修补来更改 dataTables 核心库中的许多内容.要防止将列标题拖到表格的 部分之外，您可以这样做:

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(),内 = (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=预览

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

Is it possible to avoid the column, not to drag out of the data-table view area, as you can make out yourself, what I am talking about from this link 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

(Just in case the issue raised, explains better about what I am talking about)

解决方案

As l-lin points out, angular-datatables is a wrapper for jQuery dataTables providing directives and making sure dataTables not is conflicting with angular. To change core functionality you must still change the core.

You can change many things in the dataTables core libraries by monkey patching. To prevent dragging of a column header outside the <thead> section of a table you can do this :

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);
}

The above override ColReorders mousemove events when dragging is going on. If the mouse is outside the <thead> element it simply just dont pass the event to the original function - by that dragging a column outside is effectively prevented.

angular-datatables demo -> http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

pure jQuery dataTables demo -> http://jsfiddle.net/0boznoh7/

这篇关于角度数据表列可拖出表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！