Forum : Drag and drop en natif

Bonjour à tous,

Comme je me mets à nodeJS, je fais un peu un retour à Javascript disons natif (sans Jquery etc....).

Du coup j'essaie de me construire un système de drag'n'drop sur les lignes d'une table.

Voici le code
Pour le HTML

<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <table> <thead> <td>Cell1</td> <td>Cell2</td> <td>Cell3</td> </thead> <tbody id="ordonable"> <tr><td>001</td><td>001</td><td>001</td></tr> <tr></tr> <tr><td>002</td><td>002</td><td>002</td></tr> <tr><td>003</td><td>003</td><td>003</td></tr> <tr><td>004</td><td>004</td><td>004</td></tr> </tbody> </table> <script src="sort.js"></script> </body> </html>

Le fichier sort.js

var cible; var noeud = document.querySelector('#ordonable'), enf = noeud.childNodes; for (var i = enf.length -1; i > -1; i--) { bloc = enf[i]; // on parcours tous les noeud et on supprime les noeuds enfants vides if(bloc.nodeName ==='#text') { noeud.removeChild(bloc); } else{ // on rend le bloc draggable draggable(bloc); } } function draggable(bloc) { bloc.draggable = true; bloc.addEventListener('dragstart', function(event){ cible = event.target; event.dataTransfer.setData('text/plain', cible.innerText || cible.textContent); event.dataTransfer.effectAllowed = "move"; cible.classList.add('dragstart'); console.log(bloc); }, false); bloc.addEventListener('dragover', function(event){ event.preventDefault(); }, false); bloc.addEventListener('dragenter', function(event){ RowIndex = this.rowIndex; console.log(RowIndex); bloc.style.backgroundColor = "#EEE"; noeud.insertBefore(cible,this); }, false); bloc.addEventListener('dragleave', function(event){ bloc.style.backgroundColor = "#FFF"; ; }, false); bloc.addEventListener('drop', function(event){ event.preventDefault(); bloc.style.backgroundColor = '#FFF'; bloc.classList.remove('dragstart'); }, false); bloc.addEventListener('dragend',function(event){ cible.classList.remove('dragstart'); }, false); }

Le drag and drop fonctionne correctement, mais je n'arrive pas à faire deux choses. Lors du déplacement d'une row, je vois que la ligne bouge, mais j'aimerais que cette ligne "bougeante" ait un style particulier( genre contour rouge...).

En second lieu, je voudrais qu'une ligne "vierge" apparaisse là où il est possible de droper, histoire de bien marquer à l'utilisateur qu'il peut déposer sa ligne à cet endroit. Bien évidemment, sur le "dragLeave", la ligne vièrge doit être supprimée.

Je dois manquer de sommeil, parce que je n'arrive pas à le faire.
Lorsque j'essaie un insertBefore(), soit cela ne fonctionne pas soit j'essaie des dixaines de lignes qui apparaissent le temps que je reste sur le "dragenter".

Si vous avez des pistes pour me permettre de le faire, je suis preneur.

Bonne journée à tous

Drag and drop en natif

6 réponses