diff --git a/apps/client/src/widgets/collections/board/api.ts b/apps/client/src/widgets/collections/board/api.ts
index 61bcbe339..90d41d7c4 100644
--- a/apps/client/src/widgets/collections/board/api.ts
+++ b/apps/client/src/widgets/collections/board/api.ts
@@ -106,7 +106,15 @@ export default class BoardApi {
const newColumns = [...this.columns];
const [movedColumn] = newColumns.splice(fromIndex, 1);
- newColumns.splice(toIndex, 0, movedColumn);
+
+ // Adjust toIndex after removing the element
+ // When moving forward (right), the removal shifts indices left
+ let adjustedToIndex = toIndex;
+ if (fromIndex < toIndex) {
+ adjustedToIndex = toIndex - 1;
+ }
+
+ newColumns.splice(adjustedToIndex, 0, movedColumn);
// Update view config with new column order
const newViewConfig = {
diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx
index 23b481358..584537387 100644
--- a/apps/client/src/widgets/collections/board/column.tsx
+++ b/apps/client/src/widgets/collections/board/column.tsx
@@ -26,10 +26,14 @@ export default function Column({
isDraggingColumn,
columnItems,
api,
+ onColumnHover,
+ isAnyColumnDragging,
}: {
columnItems?: { note: FNote, branch: FBranch }[];
isDraggingColumn: boolean,
- api: BoardApi
+ api: BoardApi,
+ onColumnHover?: (index: number, mouseX: number, rect: DOMRect) => void,
+ isAnyColumnDragging?: boolean
} & DragContext) {
const [ isVisible, setVisible ] = useState(true);
const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext);
@@ -66,10 +70,17 @@ export default function Column({
setVisible(!isDraggingColumn);
}, [ isDraggingColumn ]);
+ const handleColumnDragOver = useCallback((e: DragEvent) => {
+ if (!isAnyColumnDragging || !onColumnHover) return;
+ e.preventDefault();
+ const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+ onColumnHover(columnIndex, e.clientX, rect);
+ }, [isAnyColumnDragging, onColumnHover, columnIndex]);
+
return (
(null);
const [ draggedColumn, setDraggedColumn ] = useState<{ column: string, index: number } | null>(null);
const [ columnDropPosition, setColumnDropPosition ] = useState
(null);
+ const [ columnHoverIndex, setColumnHoverIndex ] = useState(null);
const [ branchIdToEdit, setBranchIdToEdit ] = useState();
const [ columnNameToEdit, setColumnNameToEdit ] = useState();
const api = useMemo(() => {
@@ -129,32 +130,31 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
const handleColumnDragOver = useCallback((e: DragEvent) => {
if (!draggedColumn) return;
e.preventDefault();
+ }, [draggedColumn]);
- const container = e.currentTarget as HTMLElement;
- const columns = Array.from(container.querySelectorAll('.board-column'));
- const mouseX = e.clientX;
+ const handleColumnHover = useCallback((visualIndex: number, mouseX: number, columnRect: DOMRect) => {
+ if (!draggedColumn) return;
- let newIndex = columns.length;
- for (let i = 0; i < columns.length; i++) {
- const col = columns[i] as HTMLElement;
- const rect = col.getBoundingClientRect();
- const colMiddle = rect.left + rect.width / 2;
+ const columnMiddle = columnRect.left + columnRect.width / 2;
- if (mouseX < colMiddle) {
- newIndex = i;
- break;
- }
+ // Determine drop position based on mouse position relative to column center
+ let dropIndex = mouseX < columnMiddle ? visualIndex : visualIndex + 1;
+
+ // Convert visual index back to actual array index
+ if (draggedColumn.index <= visualIndex) {
+ // Add 1 because the dragged column (which is hidden) comes before this position
+ dropIndex += 1;
}
- setColumnDropPosition(newIndex);
+ setColumnDropPosition(dropIndex);
}, [draggedColumn]);
const handleContainerDrop = useCallback((e: DragEvent) => {
e.preventDefault();
if (draggedColumn && columnDropPosition !== null) {
- console.log("Move ", draggedColumn.index, "at", columnDropPosition);
handleColumnDrop(draggedColumn.index, columnDropPosition);
}
+ setColumnHoverIndex(null);
}, [draggedColumn, columnDropPosition, handleColumnDrop]);
return (
@@ -168,20 +168,30 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
onDragOver={handleColumnDragOver}
onDrop={handleContainerDrop}
>
- {byColumn && columns?.map((column, index) => (
- <>
- {columnDropPosition === index && (
-
- )}
-
- >
- ))}
+ {byColumn && columns?.map((column, index) => {
+ // Calculate visual index (skipping hidden dragged column)
+ let visualIndex = index;
+ if (draggedColumn && draggedColumn.index < index) {
+ visualIndex = index - 1;
+ }
+
+ return (
+ <>
+ {columnDropPosition === index && (
+
+ )}
+ handleColumnHover(visualIndex, mouseX, rect)}
+ isAnyColumnDragging={!!draggedColumn}
+ />
+ >
+ );
+ })}
{columnDropPosition === columns?.length && draggedColumn && (
)}