Ajout drag & drop

boulier.css

@@ -13,10 +13,10 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    height: .6em;
+    height: .8em;
     width: 100%;
     background-color: grey;
-    z-index: -1;
+    z-index: 0;
 }
 
 /* Boule et couleur */
@@ -29,6 +29,8 @@
     margin-left: auto;
     margin-right: auto;
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 .red {

boulier.js

@@ -150,13 +150,13 @@ class Boulier {
             let changeColor = Math.round(this._ball / this.color[i].length);
             for(let j = 0; j < this.boulier[i].length; j++) {
                 const elt = this.boulier[i][j];
-                html += '<div class="cell"><div class="line"></div>';
+                html += '<div class="cell"><div class="line" data-line="' + i + '" data-col="' + j + '" ondragover="allowDrop(event)" ondrop="ballDrop(event, this)""></div>';
                 if (elt) {
                     let ballColor = this.color[i][Math.trunc(cptBall/changeColor)];
                     if (ballColor == null) {
                         ballColor = this.color[i][this.color[i].length - 1];
                     }
-                    html += '<div class="ball ' + ballColor + '" data-line="' + i + '" data-col="' + j + '" onclick="bouleClick(this)"></div>';
+                    html += '<div class="ball ' + ballColor + '" data-line="' + i + '" data-col="' + j + '" draggable="true" ondragstart="ballDrag(event)" onclick="ballClick(this)"></div>';
                     cptBall++;
                 }
                 html += '</div>';
@@ -192,13 +192,55 @@ class Boulier {
 
 }
 
-function bouleClick(elt) {
-    const boulier = Boulier.instance;
-    if (boulier == null) {
+function ballClick(elt) {
+    const instance = Boulier.instance;
+    if (instance == null) {
         return;
     }
     const line = parseInt(elt.getAttribute('data-line'));
     const col = parseInt(elt.getAttribute('data-col'));
-    boulier.move(line, col);
-    boulier.render();
+    instance.move(line, col);
+    instance.render();
+}
+
+function allowDrop(evt) {
+    evt.preventDefault();
+}
+
+function ballDrag(evt) {
+    const line = parseInt(evt.target.getAttribute('data-line'));
+    const col = parseInt(evt.target.getAttribute('data-col'));
+    evt.dataTransfer.setData("text", line + ";" + col);
+}
+
+function ballDrop(evt, elt) {
+    evt.preventDefault();
+    // Récupère l'instance
+    const instance = Boulier.instance;
+    if (instance == null) {
+        return;
+    }
+    // Recupère les infos de la balle et de la destination
+    const line = parseInt(elt.getAttribute('data-line'));
+    const col = parseInt(elt.getAttribute('data-col'));
+    const split = evt.dataTransfer.getData("text").split(';');
+    const ballLine = parseInt(split[0]);
+    const ballCol = parseInt([split[1]]);
+    // Vérifie si le cas est valide
+    if (line != ballLine || col == ballCol) {
+        return;
+    }
+    let right = true;
+    for (let i = ballCol; i < instance.boulier[line].length; i++) {
+        if (!instance.boulier[line][i]) {
+            right = false;
+            break;
+        }
+    }
+    if ((right && col > ballCol) || (!right && col < ballCol)) {
+        return;
+    }
+    // Bouge
+    instance.move(ballLine, ballCol);
+    instance.render();
 }