diff --git a/public/index.html b/public/index.html
index 2492c0c..1d5c120 100644
--- 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;
+ }
@@ -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 = `${i+1}
- ${data.name || "-"}
- ∞`;
+ ${data.name || "-"}
+ ∞`;
+
+ // 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);
});
}
diff --git a/public/readme.md b/public/readme.md
index 74677d5..5b53106 100644
--- 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
+