Tengo una tabla simple como esta:
table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr> <td>1</td> <td>red</td> <td>1</td> </tr> <tr> <td>2</td> <td>blue</td> <td>2</td> </tr> <tr> <td>3</td> <td>yellow</td> <td>3</td> </tr> </table>Quiero poder arrastrar y soltar un elemento de una posición a otra y cambiar el número de ese elemento al número del elemento con el que fue reemplazado, pero el nombre y la identificación no cambiarían. por ejemplo, en la tabla anterior, arrastré el azul al primer lugar, por lo tanto, el número de azul se convierte en 1, pero la identificación de azul sigue siendo 2, y el número de rojo se convierte en 2, pero la identificación de rojo sigue siendo 1 y sus posiciones en la tabla también cambian.
¿Cómo puedo hacer esto?
Puede usar el evento de arrastre , cuando comience a arrastrarlo , haga una copia del target que necesitará cuando arrastre .
Después de que termine el arrastre, simplemente reordene el primer td en cada fila de la tabla ( tr ) excluyendo cualquier fila en thead seleccionando tbody
let shadow function dragit(event) { shadow = event.target; } function dragover(e) { let children = Array.from(e.target.parentNode.parentNode.children); if (children.indexOf(e.target.parentNode) > children.indexOf(shadow)) e.target.parentNode.after(shadow); else e.target.parentNode.before(shadow); } function reOrder() { document.querySelectorAll(".myTable > tbody > tr > td:first-child").forEach(function (elem, index) { elem.innerHTML = (index + 1); }); } table, th, td { border: 1px black solid; border-collapse: collapse; } <table class="myTable"> <thead> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> </thead> <tbody> <tr draggable="true" ondragstart="dragit(event)" ondragover="dragover(event)" ondragend="reOrder()"> <td>1</td> <td>red</td> <td>1</td> </tr> <tr draggable="true" ondragstart="dragit(event)" ondragover="dragover(event)" ondragend="reOrder()"> <td>2</td> <td>blue</td> <td>2</td> </tr> <tr draggable="true" ondragstart="dragit(event)" ondragover="dragover(event)" ondragend="reOrder()"> <td>3</td> <td>yellow</td> <td>3</td> </tr> </tbody> </table>