카드 드래그시 원본 카드가 있던 자리를 표시
This commit is contained in:
@@ -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 = [];
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user