angular-datatable column draggable out of the tabl

Question

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)

Answer 1

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/