colonna databile angolare trascinabile fuori dalla tabella - jquery, angularjs, datatables, angular-datatables

È possibile evitare la colonna, non trascinare fuori dall'area di visualizzazione della tabella di dati, come puoi capire tu stesso, di cosa sto parlando da questo link https://l-lin.github.io/angular-datatables/#/withColReorder

quando si tenta di trascinare una colonna lontano dalla tabella di dati. Ho sollevato il problema nel sito ufficiale del componente https://github.com/l-lin/angular-datatables/issues/496

(Nel caso in cui il problema sia sollevato, spiega meglio di cosa sto parlando)

risposte:

Come l-lin sottolinea, angular-datatables è un wrapper perjQuery dataTables fornisce direttive e verifica che i dataTable non siano in conflitto con le angolari. Per cambiare le funzionalità di base, devi comunque modificare il core.

È possibile modificare molte cose nelle librerie principali DataTables mediante patch per scimmia. Per impedire il trascinamento di un'intestazione di colonna all'esterno di <thead> sezione di una tabella puoi farlo:

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

L'override di ColReorders sopra menziona gli eventi durante il trascinamento. Se il mouse è all'esterno del <thead> elemento semplicemente non passa l'evento alla funzione originale - dal fatto che il trascinamento di una colonna all'esterno viene effettivamente prevenuto.

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

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