master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dnd): ensure drop triggers by preventing default and stopping propagation; set dropEffect=copy on dragover

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:35:54 +02:00
parent 0c8e00389b
commit 3f57904dd7
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/components/PlaylistManager.tsx
View File

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