diff --git a/src/views.js b/src/views.js index 250cfa4..d439307 100644 --- a/src/views.js +++ b/src/views.js @@ -558,19 +558,23 @@ function _initPlaylistDragDrop(container, songs, pl) { handle.innerHTML = ''; item.insertBefore(handle, item.firstChild); item._songRef = songs[i]; + item.draggable = true; // set upfront so browser registers it before any event item.addEventListener('dragstart', e => { if (!e.target.closest('.pl-drag-handle')) { e.preventDefault(); return; } dragSrc = item; e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/plain', ''); // required by Firefox setTimeout(() => item.classList.add('dragging'), 0); }); item.addEventListener('dragend', () => { + dragSrc = null; item.classList.remove('dragging'); container.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over')); }); item.addEventListener('dragover', e => { e.preventDefault(); + e.dataTransfer.dropEffect = 'move'; if (item === dragSrc) return; container.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over')); item.classList.add('drag-over'); @@ -580,6 +584,7 @@ function _initPlaylistDragDrop(container, songs, pl) { }); item.addEventListener('drop', e => { e.preventDefault(); + e.stopPropagation(); if (!dragSrc || item === dragSrc) return; item.classList.remove('drag-over'); const allItems = Array.from(container.children); @@ -594,13 +599,10 @@ function _initPlaylistDragDrop(container, songs, pl) { const n = el.querySelector('.song-num'); if (n) n.textContent = idx + 1; }); - // Debounced save + // Debounced save to Navidrome clearTimeout(saveTimer); saveTimer = setTimeout(() => _savePlaylistOrder(pl, songs), 800); }); - - handle.addEventListener('mousedown', () => { item.draggable = true; }); - item.addEventListener('dragend', () => { item.draggable = false; }); }); }