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

问题描述

是否有可能避免列，而不是拖出来的数据表视图区中，你可以辨认出自己，什么我从这个链接说起
https://l-lin.github.io/angular-datatables/#/withColReorder

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

当您尝试从数据表远远拖动一列。
我已经在官方网站成分所提出的问题
https://github.com/l-lin/angular-datatables/issues/496

（以防万一提出的问题，解释了什么我讲的更好）

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

推荐答案

由于 L-林指出，角的DataTable是jQuery的数据表提供的指令，并确保数据表不与冲突的一个包装棱角分明。要改变核心功能仍必须改变的核心。

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.

您可以通过猴子修补更改的DataTable核心库了很多东西。外列标题的prevent拖动＆LT;＆THEAD GT; 表的部分，你可以这样做：

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

上面覆盖ColReorders mousemove事件时拖动是怎么回事的时候。如果鼠标是＆LT外; THEAD＆GT; 元素，它仅仅只是不传递事件到原有的功能 - 通过拖动列外的是有效的prevented。

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.

角的DataTable演示 - > http://plnkr.co/编辑/ uPv8FoUrJkQWnEaE2AQY？p = preVIEW

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

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

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

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