kolumna z datowalną kolumną przeciągalną poza tabelę - jquery, angularjs, datatables, angular-datatables

Czy można ominąć kolumnę, a nie przeciągać z obszaru widoku tabeli danych, ponieważ sam możesz się przekonać, o czym mówię z tego linku https://l-lin.github.io/angular-datatables/#/withColReorder

przy próbie przeciągnięcia kolumny z dala od tabeli danych. Podniosłem problem na oficjalnej stronie komponentu https://github.com/l-lin/angular-datatables/issues/496

(Na wszelki wypadek podniesiony problem lepiej wyjaśnia, o czym mówię)

Odpowiedzi:

Tak jak l-lin zwraca uwagę, że kątowe-datatables to wrapper dlajQuery DataTables zapewniające dyrektywy i dbające o to, aby tabele danych nie kolidowały z kątowymi. Aby zmienić podstawową funkcjonalność, musisz zmienić rdzeń.

Możesz zmienić wiele rzeczy w podstawowych bibliotekach DataTables poprzez łatanie małp. Aby zapobiec przeciągnięciu nagłówka kolumny poza <thead> sekcję tabeli możesz zrobić:

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

Powyższe nadpisanie zdarzeń MouseReove ColReorders podczas przeciągania trwa. Jeśli mysz znajduje się na zewnątrz <thead> element po prostu nie przekazuje zdarzenia do pierwotnej funkcji - dzięki temu skutecznie zapobiega się przeciągnięciu kolumny na zewnątrz.

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

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