diff --git a/static/js/components/SidebarManager.js b/static/js/components/SidebarManager.js index f1933d69..5ecdcc20 100644 --- a/static/js/components/SidebarManager.js +++ b/static/js/components/SidebarManager.js @@ -9,6 +9,7 @@ import { bulkManager } from '../managers/BulkManager.js'; import { showToast } from '../utils/uiHelpers.js'; import { performFolderUpdateCheck } from '../utils/updateCheckHelpers.js'; import { escapeHtml, escapeAttribute } from './shared/utils.js'; +import { MODEL_CARD_DRAG_MIME_TYPE } from '../utils/constants.js'; export class SidebarManager { constructor() { @@ -252,6 +253,9 @@ export class SidebarManager { if (dataTransfer) { dataTransfer.effectAllowed = 'move'; dataTransfer.setData('text/plain', filePaths.join(',')); + // Tag the drag as an internal card drag so preview-drop handlers on + // other cards ignore it (no highlight, no preview replacement). + dataTransfer.setData(MODEL_CARD_DRAG_MIME_TYPE, filePaths.join(',')); try { dataTransfer.setData('application/json', JSON.stringify({ filePaths })); } catch (error) { diff --git a/static/js/components/shared/ModelCard.js b/static/js/components/shared/ModelCard.js index f51c2741..f6252f64 100644 --- a/static/js/components/shared/ModelCard.js +++ b/static/js/components/shared/ModelCard.js @@ -3,7 +3,7 @@ import { state, getCurrentPageState } from '../../state/index.js'; import { showModelModal } from './ModelModal.js'; import { bulkManager } from '../../managers/BulkManager.js'; import { modalManager } from '../../managers/ModalManager.js'; -import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, getMatureBlurThreshold, MODEL_SUBTYPE_DISPLAY_NAMES } from '../../utils/constants.js'; +import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, getMatureBlurThreshold, MODEL_SUBTYPE_DISPLAY_NAMES, MODEL_CARD_DRAG_MIME_TYPE } from '../../utils/constants.js'; import { MODEL_TYPES } from '../../api/apiConfig.js'; import { getModelApiClient } from '../../api/modelApiFactory.js'; import { showDeleteModal } from '../../utils/modalUtils.js'; @@ -455,6 +455,9 @@ function showExampleAccessModal(card, modelType) { export function createModelCard(model, modelType) { const card = document.createElement('div'); card.className = 'model-card'; // Reuse the same class for styling + // Always draggable (move-to-folder in the sidebar). Accidental micro-drags + // from click jitter are rendered harmless by the preview-drop handlers + // below, which ignore internal card drags via MODEL_CARD_DRAG_MIME_TYPE. card.draggable = true; card.dataset.sha256 = model.sha256; card.dataset.filepath = model.file_path; @@ -647,7 +650,7 @@ export function createModelCard(model, modelType) {