카드 드래그시 원본 카드가 있던 자리를 표시

This commit is contained in:
2026-05-16 10:39:27 +09:00
parent 7d2f7e8cd0
commit 2c80a92fe0
2 changed files with 42 additions and 11 deletions
+36 -11
View File
@@ -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 = [];
}
+6
View File
@@ -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);