Drag and drop en natif

netchaiev
Javascript

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

6 réponses

LeBoulet
Réponse acceptée

Salut,

Je t'ai ajouté la ligne vierge.
https://jsfiddle.net/7kbLd5ga/5/

Le code n'est pas optimisé, il y a quelques répétitions.

betaWeb

Salut,

Tu nous fait un petit codepen (http://codepen.io/) pour que l'on puisse avoir une démo ? Je pense qu'il sera plus simple pour nous de déboguer et donc de t'aider de cette façon :)

netchaiev
Auteur

salut betaWeb :

Voici un lien sur JSFiddle

netchaiev
Auteur

Heu... y'a personne qu'à une idée ?

Boonne journée

betaWeb

Salut,

On est pas H24 ici, laisse nous le temps de la réflexion ;)

netchaiev
Auteur

Salut LeBoulet,

Merci de ton aide. Je vais regarder cela aujourd'hui.

Je ferais l'optimisation après.
Bonne journée