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

问题描述

是否可以避免列，而不是拖出数据表视图区域，您可以自己解决这个链接

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

（为了防止问题的出现，更好地解释了什么我正在谈论）

解决方案

As l-lin 指出，角度数据表是一个包装因为jQuery dataTables提供指令并确保dataTable不与角度冲突。要更改核心功能，您还必须更改核心。

您可以通过猴子修补来更改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&&> r.top&& y< r.bottom ）; 
 
 if（within）old_fnMouseMove.apply（this，arguments）; 
} 
  

上面的代码在拖动时覆盖了ColReorders mousemove事件。如果鼠标位于< thead> 元素之外，则只需将事件传递给原始函数即可，因此可以有效地防止向外拖动列。

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

pure jQuery dataTables demo - > 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屋！