DRAGABLE HORIZONTAL

lauromneto

Good afternoon sirs.
Please, has anyone managed to implement or know how to implement dragable horizontal scroll on datatable?

kthorngren

Are you referring to the scrollX option? See this example:
https://datatables.net/examples/basic_init/scroll_x.html

Kevin

lauromneto

Good afternoon Kevin This I am already using.
What I'm trying to do and DATATABLE ONLY I'm not getting is to make the dragable, that is, I click on the table, holding it clicked, I drag to the right and left.

lauromneto

That's exactly what I need.

https://stackoverflow.com/questions/39382901/drag-table-or-other-content-horizontally-in-scrollable-div

In Datatable everything is difficult, complicated to implement, simple things to solve in Datatable, we suffer, get screwed to work. I've been trying to make this work on the datatable since morning and nothing !!!! My God !!!!!
There is still the question of the date there from the Editor that until now has not been resolved.
Difficult it saw! For the love of God !!!!!

kthorngren

What I'm trying to do and DATATABLE ONLY I'm not getting is to make the dragable, that is, I click on the table, holding it clicked, I drag to the right and left.

I see, you want to click anywhere in the table and drag it left or right. I took the solution presented and placed it in this test case using Editor and select:
http://live.datatables.net/guwafemu/81/edit

Only made 2 changes to the CSS in the solution for the div to take 100% width.

Kevin

lauromneto

PERFECT KEVIN !
Thank you !

Now we just need to resolve the date issue. rs rs
If you can help me, I'm also trying ...

The dragable issue, I had solved it this way:

initComplete: function () {
var tableBody = document.querySelector ('. dataTables_scrollBody');
var headerTable = document.querySelector ('. dataTables_scrollHead');
var curDown = false
var oldScrollLeft = 0;
// var oldScrollTop = 0;
var curXPos = 0;
// var curYPos = 0;
if (tableBody) {
tableBody.addEventListener ("mousemove", function (e) {
if (curDown === true) {
tableBody.scrollLeft = oldScrollLeft + (curXPos - e.pageX);
headerTable.scrollLeft = oldScrollLeft + (curXPos - e.pageX);
//tableBody.scrollTop = oldScrollTop + (curYPos - e.pageY);
}
})
tableBody.addEventListener ("mousedown", function (e) {
curDown = true;
// curYPos = e.pageY;
curXPos = e.pageX;
oldScrollLeft = tableBody.scrollLeft;
// oldScrollTop = tableBody.scrollTop;
})
tableBody.addEventListener ("mouseup", function (e) {
curDown = false;
})
tableBody.addEventListener ("scroll", function (e) {
headerTable.scrollLeft = tableBody.scrollLeft;
})
}
},

kthorngren

Now we just need to resolve the date issue. rs rs
If you can help me, I'm also trying ...

Sorry, I don't use nor know enough about PHP to be helpful.

Kevin

lauromneto

Ah yes .... I am waiting for Allan.

kthorngren

I tried your solution from the SO thread and it works but has a couple issues.
http://live.datatables.net/rirequqi/1/edit

Maybe it behaves correctly in your environment but in the test case it sometimes can highlight cells. If you scroll off the table the curDown flag is not reset so if you move the mouse over the table without the mouse button being down it will still scroll. I use the center-div class to size the table to show this. Probably can fix both issues.

The neat thing about your solution is that if you enable scrollY you can drag the table vertically too.

I updated my test case to move the draggable div to be placed around the table only so the table is all that scrolls. This is done using the dom option to wrap the table in a div with the classes box and drag. This doesn't use scrollX. It doesn't seem to have the two issues I see in the other example. Seems to be a simpler solution.
http://live.datatables.net/nibicufa/1/edit

Kevin

kthorngren

BTW, that SO thread was a good find!

Kevin

lauromneto

Good morning Kevin. Thanks for the answer and explanation. I actually followed an example I saw from another case on the Internet and changed it.
But your solution was that I used it here too.
Thank you.

lauromneto

Ah! In that case, when dragging the table causes the selection of some cells, you solve with this:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

mmj

This solution by kthorgren was perfect for my issue too
http://live.datatables.net/guwafemu/81/edit

I just had to add

 mx = 0;

at the beginning of the initComplete to avoid errors in console
and forced table to be 100%.
Thanx!