diff --git a/src/renderer/handlers/drag-drop.js b/src/renderer/handlers/drag-drop.js index 604878e..15e319e 100644 --- a/src/renderer/handlers/drag-drop.js +++ b/src/renderer/handlers/drag-drop.js @@ -1,7 +1,8 @@ let _grid, _gridContainer, _dragGhostEl, _fileExplorerEl; let _state, _cb, _onFolderDrop; -let _placeholder = null; -let _dropTargetIdx = null; +let _placeholder = null; +let _originPlaceholders = []; +let _dropTargetIdx = null; let dragMode = null; let dragSrcIdx = null; @@ -75,13 +76,16 @@ function _onDragStart(e) { e.dataTransfer.setDragImage(img, 0, 0); _showGhost(e, `πŸ“¦ ${count}개 이동 쀑`); - // λΈŒλΌμš°μ €κ°€ λ“œλž˜κ·Έ 이미지λ₯Ό μΊ‘μ²˜ν•œ λ’€ μΉ΄λ“œ 숨기고 ν”Œλ ˆμ΄μŠ€ν™€λ” μ‚½μž… + // λΈŒλΌμš°μ €κ°€ λ“œλž˜κ·Έ 이미지λ₯Ό μΊ‘μ²˜ν•œ λ’€ μΉ΄λ“œ 숨기고 원본 μœ„μΉ˜ ν‘œμ‹œ requestAnimationFrame(() => { - const firstCard = _getCardEl(toHide[0]); - if (firstCard) _grid.insertBefore(_placeholder, firstCard); toHide.forEach(i => { const c = _getCardEl(i); - if (c) c.classList.add('drag-hidden'); + if (c) { + const originPh = _createOriginPlaceholder(); + _grid.insertBefore(originPh, c); + _originPlaceholders.push(originPh); + c.classList.add('drag-hidden'); + } }); }); } else { @@ -93,7 +97,9 @@ function _onDragStart(e) { const srcCard = this; requestAnimationFrame(() => { - _grid.insertBefore(_placeholder, srcCard); + const originPh = _createOriginPlaceholder(); + _grid.insertBefore(originPh, srcCard); + _originPlaceholders.push(originPh); srcCard.classList.add('drag-hidden'); }); } @@ -144,7 +150,7 @@ function _onDragEnd() { _stopScroll(); _hideGhost(); _clearTreeHover(); - // ν”Œλ ˆμ΄μŠ€ν™€λ” 제거 및 숨긴 μΉ΄λ“œ 볡원 (_moveSingle/_moveMulti μ—μ„œ 이미 μ²˜λ¦¬ν–ˆμœΌλ©΄ no-op) + _clearOriginPlaceholders(); if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder); _dropTargetIdx = null; document.querySelectorAll('.card').forEach(c => @@ -229,8 +235,7 @@ function _onGridDrop(e) { if (!dragMode) return; if (e.target.closest('.card')) return; e.preventDefault(); - _dropTargetIdx = _state.files.length; - _performDrop(); + _dropTargetIdx = null; // 빈 μ˜μ—­ λ“œλ‘­ β†’ 이동 없이 볡원 } // ── 이동 둜직 ───────────────────────────────────── @@ -241,6 +246,7 @@ function _moveSingle(srcIdx, targetIdx) { _state.files.splice(insertAt, 0, moved); if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder); + _clearOriginPlaceholders(); const srcCard = _getCardEl(srcIdx); const targetCard = _getCardEl(targetIdx); if (srcCard) srcCard.classList.remove('drag-hidden'); @@ -275,8 +281,8 @@ function _moveMulti(targetIdx) { for (let i = 0; i < movedFiles.length; i++) newSel.add(adjustedTarget + i); _state.selectedIdxs = newSel; - // ν”Œλ ˆμ΄μŠ€ν™€λ” 제거, 숨긴 μΉ΄λ“œ 볡원 ν›„ DOM μž¬μ •λ ¬ if (_placeholder.parentNode) _placeholder.parentNode.removeChild(_placeholder); + _clearOriginPlaceholders(); const byPath = new Map(); Array.from(_grid.children).forEach(c => { c.classList.remove('drag-hidden'); @@ -357,3 +363,22 @@ function _hideGhost() { function _getCardEl(idx) { return _grid.querySelector(`.card[data-idx="${idx}"]`); } + +function _createOriginPlaceholder() { + const ph = document.createElement('div'); + ph.className = 'card card-origin-placeholder'; + ph.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }); + ph.addEventListener('dragenter', e => e.preventDefault()); + ph.addEventListener('drop', e => { + e.preventDefault(); + _dropTargetIdx = null; // 원본 μœ„μΉ˜μ— λ“œλ‘­ β†’ 이동 없이 볡원 + }); + return ph; +} + +function _clearOriginPlaceholders() { + _originPlaceholders.forEach(ph => { + if (ph.parentNode) ph.parentNode.removeChild(ph); + }); + _originPlaceholders = []; +} diff --git a/src/renderer/style.css b/src/renderer/style.css index 7667e1c..c43caac 100644 --- a/src/renderer/style.css +++ b/src/renderer/style.css @@ -245,6 +245,12 @@ main { .card.drag-over { border-color: var(--accent) !important; background: var(--drag-over); } .card.drag-hidden { display: none; } +.card-origin-placeholder { + border: 2px dashed rgba(255, 255, 255, 0.18); + background: rgba(255, 255, 255, 0.04); + border-radius: 8px; +} + .card-placeholder { border: 2px dashed var(--accent); background: rgba(124, 106, 247, 0.08);