Help need help with drag & drop of columns into tables

phuocng / html-dom

Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 ⭐if it’s useful.

https://phuoc.ng/collection/html-dom

MIT License

6.53k stars 462 forks source link

Help need help with drag & drop of columns into tables #210

Open jcarlos66 opened 3 years ago

jcarlos66 commented 3 years ago

Hi Phuoc, I am not an expert programmer, I am an amateur and for a personal project I need to make a small modification to this code https://htmldom.dev/drag-and-drop-table-column/

the code works very well, I just need that moving the table columns is not done through the text, but by dragging an icon inside the TH something like that. Header name .

In other words, only if I hover over the icon and drag the icon can the column move as it does now, but if the text or any other element within the TH is dragged, it will not trigger the drag event. Could you help me? thanks

kl3sk commented 3 years ago

Did you found a solution ? I manage to have the same behavior, this should work:

Assuming a element (ex: <span>) inside the <th> with a class .handle

Update like this :

draggingColumnIndex = [].slice.call(table.querySelectorAll('.handle')).indexOf(e.target)
....

table.querySelectorAll('th > .handle').forEach(function (headerCell) { 
....