cedricAbonnel/soundboard_a5l
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

permet un drag'n'drop

Browse Source
This commit is contained in:
Cédric Abonnel
2026-03-26 23:53:18 +01:00
parent 8155a4dcef
commit d98c1f24b3
2 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
public/index.html
View File

@@ -99,6 +99,15 @@
body.edit-mode .btn { border: 1px dashed var(--accent); cursor: crosshair; } 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; } .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> </style>
</head> </head>
<body> <body>
@@ -147,6 +156,49 @@
const players = {}; 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() { function init() {
const board = document.getElementById('board'); const board = document.getElementById('board');
board.innerHTML = ""; board.innerHTML = "";
@@ -154,10 +206,23 @@
const div = document.createElement('div'); const div = document.createElement('div');
div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`; div.className = `btn ${data.file ? 'active' : ''} ${data.loop ? 'has-loop' : ''}`;
div.id = `btn-${i}`; div.id = `btn-${i}`;
div.setAttribute('draggable', 'true'); // Rend le bouton draggable
div.innerHTML = `<span class="btn-num">${i+1}</span> div.innerHTML = `<span class="btn-num">${i+1}</span>
<span style="padding:10px">${data.name || "-"}</span> <span style="padding:10px">${data.name || "-"}</span>
<span class="loop-tag">∞</span>`; <span class="loop-tag">∞</span>`;
// Clic pour lecture ou édition
div.onclick = () => handleBtnClick(i); 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); board.appendChild(div);
}); });
} }

4
public/readme.md
View File

@@ -1,3 +1,7 @@
Vous pouvez trouver des sons sur https://boardsounds.com/fr 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