chore(react/collections/board): use custom type for dragging cards

This commit is contained in:
Elian Doran 2025-09-13 09:41:54 +03:00
parent 87648f340b
commit b934b2b6ca
No known key found for this signature in database
2 changed files with 7 additions and 3 deletions

View File

@ -7,6 +7,8 @@ import { ContextMenuEvent } from "../../../menus/context_menu";
import { openNoteContextMenu } from "./context_menu";
import { t } from "../../../services/i18n";
export const CARD_CLIPBOARD_TYPE = "trilium/board-card";
export interface CardDragData {
noteId: string;
branchId: string;
@ -39,7 +41,7 @@ export default function Card({
const handleDragStart = useCallback((e: DragEvent) => {
e.dataTransfer!.effectAllowed = 'move';
const data: CardDragData = { noteId: note.noteId, branchId: branch.branchId, fromColumn: column, index };
e.dataTransfer!.setData('text/plain', JSON.stringify(data));
e.dataTransfer!.setData(CARD_CLIPBOARD_TYPE, JSON.stringify(data));
}, [note.noteId, branch.branchId, column, index]);
const handleContextMenu = useCallback((e: ContextMenuEvent) => {

View File

@ -8,7 +8,7 @@ import { ContextMenuEvent } from "../../../menus/context_menu";
import Icon from "../../react/Icon";
import { t } from "../../../services/i18n";
import BoardApi from "./api";
import Card, { CardDragData } from "./card";
import Card, { CARD_CLIPBOARD_TYPE, CardDragData } from "./card";
import { JSX } from "preact/jsx-runtime";
import froca from "../../../services/froca";
import { DragData } from "../../note_tree";
@ -173,6 +173,8 @@ function useDragging({ column, columnIndex, columnItems, isEditing }: DragContex
const handleDragOver = useCallback((e: DragEvent) => {
if (isEditing || draggedColumn || isDraggingRef.current) return; // Don't handle card drops when dragging columns
if (!e.dataTransfer?.types.includes(CARD_CLIPBOARD_TYPE)) return;
e.preventDefault();
setDropTarget(column);
@ -213,7 +215,7 @@ function useDragging({ column, columnIndex, columnItems, isEditing }: DragContex
setDropTarget(null);
setDropPosition(null);
const data = e.dataTransfer?.getData("text");
const data = e.dataTransfer?.getData(CARD_CLIPBOARD_TYPE);
if (!data) return;
let draggedCard: CardDragData | DragData[];