diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx index 3088291..cd7d0f6 100644 --- a/packages/frontend/src/components/PlaylistManager.tsx +++ b/packages/frontend/src/components/PlaylistManager.tsx @@ -143,15 +143,19 @@ const PlaylistItem: React.FC = React.memo(({ } onDragOver={(e) => { e.preventDefault(); + e.stopPropagation(); const types = Array.from((e.dataTransfer.types || []) as any); const hasOurType = types.includes('application/json') || types.includes('text/plain'); if (hasOurType) { + try { e.dataTransfer.dropEffect = 'copy'; } catch {} setIsDragOver(true); } console.debug('[DnD] dragover folder types', node.name, types); }} onDragLeave={() => setIsDragOver(false)} onDrop={(e) => { + e.preventDefault(); + e.stopPropagation(); try { const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const parsed = json ? JSON.parse(json) : null; @@ -228,15 +232,19 @@ const PlaylistItem: React.FC = React.memo(({ borderColor={selectedItem === node.name ? 'blue.800' : undefined} onDragOver={(e) => { e.preventDefault(); + e.stopPropagation(); const types = Array.from((e.dataTransfer.types || []) as any); const hasOurType = types.includes('application/json') || types.includes('text/plain'); if (hasOurType) { + try { e.dataTransfer.dropEffect = 'copy'; } catch {} setIsDragOver(true); } console.debug('[DnD] dragover playlist types', node.name, types); }} onDragLeave={() => setIsDragOver(false)} onDrop={(e) => { + e.preventDefault(); + e.stopPropagation(); try { let json = e.dataTransfer.getData('application/json'); if (!json) json = e.dataTransfer.getData('text/plain');