permet un drag'n'drop

2026-03-26 23:53:18 +01:00
parent 8155a4dcef
commit d98c1f24b3
2 changed files with 71 additions and 2 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -99,6 +99,15 @@

        body.edit-mode .btn { border: 1px dashed var(--accent); cursor: crosshair; }
        .stop-all { background: var(--danger); color: white; border: none; padding: 12px 25px; border-radius: 4px; font-weight: bold; cursor: pointer; }
+        .btn.dragging {
+            opacity: 0.4;
+            transform: scale(0.9);
+        }
+
+        .btn.drag-over {
+            border: 2px solid var(--accent) !important;
+            background: #333;
+        }
    </style>
 </head>
 <body>
@@ -147,6 +156,49 @@

    const players = {};

+    let draggedIndex = null;
+
+    function handleDragStart(e, index) {
+        draggedIndex = index;
+        e.target.classList.add('dragging');
+        // On définit un transfert de données pour Firefox
+        e.dataTransfer.setData('text/plain', index);
+    }
+
+    function handleDragOver(e) {
+        e.preventDefault(); // Nécessaire pour permettre le drop
+        return false;
+    }
+
+    function handleDrop(e, targetIndex) {
+        e.preventDefault();
+        const targetElement = document.getElementById(`btn-${targetIndex}`);
+        targetElement.classList.remove('drag-over');
+
+        if (draggedIndex === targetIndex) return;
+
+        // --- LOGIQUE D'INVERSION ---
+        // On inverse les données dans le tableau btnData
+        const temp = btnData[draggedIndex];
+        btnData[draggedIndex] = btnData[targetIndex];
+        btnData[targetIndex] = temp;
+
+        // On s'assure que les IDs restent corrects (optionnel selon ton usage)
+        btnData[draggedIndex].id = draggedIndex;
+        btnData[targetIndex].id = targetIndex;
+
+        // Si des sons étaient en cours, on les arrête pour éviter les bugs
+        stopAll();
+        
+        // On réinitialise les lecteurs audio pour ces deux boutons
+        delete players[draggedIndex];
+        delete players[targetIndex];
+
+        // Sauvegarde et mise à jour de l'affichage
+        localStorage.setItem('sb_studio_data', JSON.stringify(btnData));
+        init();
+    }
+
    function init() {
        const board = document.getElementById('board');
        board.innerHTML = "";
@@ -154,10 +206,23 @@
            const div = document.createElement('div');
            div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
            div.id = `btn-${i}`;
+            div.setAttribute('draggable', 'true'); // Rend le bouton draggable
+            
            div.innerHTML = `<span class="btn-num">${i+1}</span>
-                             <span style="padding:10px">${data.name || "-"}</span>
-                             <span class="loop-tag">∞</span>`;
+                            <span style="padding:10px">${data.name || "-"}</span>
+                            <span class="loop-tag">∞</span>`;
+            
+            // Clic pour lecture ou édition
            div.onclick = () => handleBtnClick(i);
+
+            // Événements de Drag & Drop
+            div.ondragstart = (e) => handleDragStart(e, i);
+            div.ondragover = (e) => handleDragOver(e);
+            div.ondragenter = (e) => div.classList.add('drag-over');
+            div.ondragleave = (e) => div.classList.remove('drag-over');
+            div.ondrop = (e) => handleDrop(e, i);
+            div.ondragend = (e) => div.classList.remove('dragging');
+
            board.appendChild(div);
        });
    }
--- a/public/readme.md
+++ b/public/readme.md
@@ -1,3 +1,7 @@

 Vous pouvez trouver des sons sur https://boardsounds.com/fr

+Utilisation d'IndexedDB pour stocker les son
+
+Authentification pour stocker les sons sur le serveur
+