feat: add KanbanBoard component and enhance drag controls for reparenting - good attempt check point

Author: JonathonRP

src/lib/components/motion/KanbanBoard.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+import { tick } from 'svelte';
+import type { PanInfo } from '$lib/motion-start';
+import { LayoutGroup, Reorder, useDragControls } from '$lib/motion-start';
+
+type Column = 'todo' | 'inprogress' | 'done';
+type Card = { id: number; title: string };
+
+let columns = $state<{ id: Column; label: string; cards: Card[] }[]>([
+	{
+		id: 'todo',
+		label: 'Todo',
+		cards: [
+			{ id: 1, title: 'Design mockups' },
+			{ id: 2, title: 'Write tests' },
+		],
+	},
+	{
+		id: 'inprogress',
+		label: 'In Progress',
+		cards: [
+			{ id: 3, title: 'Implement feature' },
+			{ id: 4, title: 'Code review' },
+		],
+	},
+	{ id: 'done', label: 'Done', cards: [{ id: 5, title: 'Deploy to staging' }] },
+]);
+
+// One DragControls per card — survives reparenting and carries the live session.
+const cardIds = [1, 2, 3, 4, 5];
+const controls = new Map(cardIds.map((id) => [id, useDragControls()]));
+function ctrl(id: number) {
+	if (!controls.has(id)) controls.set(id, useDragControls());
+	return controls.get(id)!;
+}
+
+let draggingId = $state<number | null>(null);
+let isReparenting = false;
+
+const cardEls: Record<number, HTMLElement | null> = {};
+
+function getColumnFromPoint(x: number, y: number): Column | null {
+	const els = document.elementsFromPoint(x, y);
+	const el = els.find((e) => e.hasAttribute('data-column'));
+	return (el?.getAttribute('data-column') as Column) ?? null;
+}
+
+function getInsertIndex(colId: Column, y: number, excludeId: number): number {
+	const col = columns.find((c) => c.id === colId)!;
+	const cards = col.cards.filter((c) => c.id !== excludeId);
+	for (let i = 0; i < cards.length; i++) {
+		const el = cardEls[cards[i].id];
+		if (!el) continue;
+		const { top, height } = el.getBoundingClientRect();
+		if (y < top + height / 2) return i;
+	}
+	return cards.length;
+}
+
+async function handleDrag(card: Card, srcColId: Column, event: MouseEvent | TouchEvent | PointerEvent, _info: PanInfo) {
+	if (isReparenting) return;
+
+	// getColumnFromPoint / getInsertIndex use document.elementsFromPoint + getBoundingClientRect
+	// which operate in viewport (client) coordinates.
+	const clientX = (event as PointerEvent).clientX;
+	const clientY = (event as PointerEvent).clientY;
+
+	const targetCol = getColumnFromPoint(clientX, clientY);
+	if (!targetCol || targetCol === srcColId) return;
+
+	isReparenting = true;
+
+	const src = columns.find((c) => c.id === srcColId)!;
+	const dst = columns.find((c) => c.id === targetCol)!;
+	const insertIdx = getInsertIndex(targetCol, clientY, card.id);
+	src.cards = src.cards.filter((c) => c.id !== card.id);
+	const newCards = [...dst.cards];
+	newCards.splice(insertIdx, 0, card);
+	dst.cards = newCards;
+
+	// Wait for old Reorder.Item to unmount (snapshot saved automatically) and
+	// new one to mount (gesture resumed automatically via pendingResume).
+	await tick();
+
+	isReparenting = false;
+}
+
+function handleDragStart(card: Card) {
+	draggingId = card.id;
+}
+
+function handleDragEnd() {
+	draggingId = null;
+	isReparenting = false;
+}
+</script>
+
+<LayoutGroup>
+	<div class="flex flex-row gap-3 p-4 bg-gray-800 rounded-xl w-full overflow-x-auto">
+		{#each columns as col (col.id)}
+			<div
+				data-column={col.id}
+				class="rounded-lg p-3 flex flex-col gap-2 min-h-48 w-44 shrink-0 bg-gray-700"
+			>
+				<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-400 mb-1">
+					{col.label}
+					<span class="ml-1 text-gray-500">({col.cards.length})</span>
+				</h3>
+
+				<Reorder.Group
+					as="div"
+					axis="y"
+					values={col.cards}
+					onReorder={(v) => { col.cards = v; }}
+					class="flex flex-col gap-2 min-h-6"
+				>
+					{#snippet children({ item: card })}
+						<Reorder.Item
+							as="div"
+							value={card}
+							layoutId="card-{card.id}"
+							layout={true}
+							drag={true}
+							dragControls={ctrl(card.id)}
+							dragListener={false}
+							whileDrag={{ zIndex: 50, cursor: 'grabbing' }}
+							animate={draggingId === card.id ? { rotate: 3 } : { rotate: 0 }}
+							onDragStart={() => handleDragStart(card)}
+							onDrag={(e, info) => handleDrag(card, col.id, e, info)}
+							onDragEnd={() => handleDragEnd()}
+							class="bg-gray-600 rounded-md p-2 select-none flex items-center gap-2 text-sm text-white"
+							ref={(el) => { cardEls[card.id] = el as HTMLElement | null; }}
+						>
+							<div
+								class="cursor-grab text-gray-400 hover:text-white shrink-0 touch-none"
+								role="button"
+								tabindex="-1"
+								onpointerdown={(e) => { e.preventDefault(); draggingId = card.id; ctrl(card.id).start(e); }}
+							>
+								<svg width="10" height="14" viewBox="0 0 10 14" fill="currentColor" aria-hidden="true">
+									<circle cx="2.5" cy="2" r="1.5" />
+									<circle cx="7.5" cy="2" r="1.5" />
+									<circle cx="2.5" cy="6" r="1.5" />
+									<circle cx="7.5" cy="6" r="1.5" />
+									<circle cx="2.5" cy="10" r="1.5" />
+									<circle cx="7.5" cy="10" r="1.5" />
+								</svg>
+							</div>
+							<span class="truncate leading-snug">{card.title}</span>
+						</Reorder.Item>
+					{/snippet}
+				</Reorder.Group>
+			</div>
+		{/each}
+	</div>
+</LayoutGroup>

src/lib/components/motion/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 export { default as AnimateLayout } from './AnimateLayout.svelte';
+export { default as AnimatePresenceMode } from './AnimatePresenceMode.svelte';
 export { default as AnimatePresenceStack } from './AnimatePresenceStack.svelte';
 export { default as AnimationSequence } from './AnimationSequence.svelte';
 export { default as ColorInterpolation } from './ColorInterpolation.svelte';
@@ -9,16 +10,16 @@ export { default as DragConstraints } from './DragConstraints.svelte';
 export { default as DragDirectionLocking } from './DragDirectionLocking.svelte';
 export { default as DragTransform } from './DragTransform.svelte';
 export { default as DurBasedSpring } from './DurBasedSpring.svelte';
+export { default as KanbanBoard } from './KanbanBoard.svelte';
 export { default as KeyFramesPosition } from './KeyFramesPosition.svelte';
 export { default as MorphSvg } from './MorphSVG.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export { default as Repeat } from './Repeat.svelte';
+export { default as ReorderList } from './ReorderList/Index.svelte';
 export { default as ReverseEffect } from './ReverseEffect.svelte';
 export { default as ScrollProgress } from './ScrollProgress.svelte';
 export { default as Spring } from './Spring.svelte';
 export { default as Tweened } from './Tweened.svelte';
 export { default as WhileDragEffect } from './WhileDragEffect.svelte';
 export { default as WhileHoverEffect } from './WhileHoverEffect.svelte';
 export { default as WhileTapEffect } from './WhileTapEffect.svelte';
-export { default as AnimatePresenceMode } from './AnimatePresenceMode.svelte';
-export { default as ReorderList } from './ReorderList/Index.svelte';

src/lib/motion-start/components/Reorder/Item.svelte

@@ -57,6 +57,7 @@ Copyright (c) 2018 Framer B.V. -->
 		value,
 		onDrag,
 		layout = true,
+		drag: dragProp,
 		ref: externalRef = $bindable(),
 		...props
 	}: Props<V> &
@@ -89,7 +90,7 @@ Copyright (c) 2018 Framer B.V. -->
 </script>
 
 <ReorderItem
-	drag={axis}
+	drag={dragProp ?? axis}
 	{...props}
 	dragSnapToOrigin
 	style={{

src/lib/motion-start/gestures/drag/VisualElementDragControls.ts

@@ -65,6 +65,19 @@ export class VisualElementDragControls {
 
 	private originPoint: Point = { x: 0, y: 0 };
 
+	/**
+	 * The cursor's position within the element's bounding box, as a 0-1 progress
+	 * value on each axis. Updated every move. Saved on unmount so the next element
+	 * with the same dragControls can resume the gesture at the same relative position.
+	 */
+	cursorProgress: Point = { x: 0.5, y: 0.5 };
+
+	/**
+	 * The last pointer event seen during this drag. Saved so reparenting can
+	 * resume using the same event origin.
+	 */
+	lastPointerEvent: PointerEvent | null = null;
+
 	/**
 	 * Shift the drag origin point by `delta` on the given axis.
 	 * Called by Reorder.Group when a slot swap happens so that the next
@@ -87,7 +100,7 @@ export class VisualElementDragControls {
 		this.visualElement = visualElement;
 	}
 
-	start(originEvent: PointerEvent, { snapToCursor = false }: DragControlOptions = {}) {
+	start(originEvent: PointerEvent, { snapToCursor = false, cursorProgress }: DragControlOptions = {}) {
 		/**
 		 * Don't start dragging if this component is exiting
 		 */
@@ -133,6 +146,22 @@ export class VisualElementDragControls {
 			 * Record gesture origin
 			 */
 			eachAxis((axis) => {
+				/**
+				 * If cursorProgress is provided (reparent resume), compute origin so
+				 * the element sits under the cursor at the same relative position.
+				 */
+				if (cursorProgress !== undefined) {
+					const { projection } = this.visualElement;
+					if (projection && projection.layout) {
+						const { min, max } = projection.layout.layoutBox[axis];
+						const elementSize = max - min;
+						const cursorPage = extractEventInfo(originEvent, 'page').point[axis];
+						// originPoint = cursorPage - cursorProgress * elementSize - min
+						this.originPoint[axis] = cursorPage - cursorProgress[axis] * elementSize - min;
+					}
+					return;
+				}
+
 				let current = this.getAxisMotionValue(axis).get() || 0;
 
 				/**
@@ -166,7 +195,20 @@ export class VisualElementDragControls {
 		};
 
 		const onMove = (event: PointerEvent, info: PanInfo) => {
-			// latestPointerEvent = event
+			this.lastPointerEvent = event;
+
+			// Update cursorProgress (cursor position within element, 0-1 on each axis)
+			const { projection } = this.visualElement;
+			const projectionLayout = projection?.layout;
+			if (projectionLayout) {
+				eachAxis((axis) => {
+					const { min, max } = projectionLayout.layoutBox[axis];
+					const elementSize = max - min;
+					if (elementSize > 0) {
+						this.cursorProgress[axis] = (info.point[axis] - min) / elementSize;
+					}
+				});
+			}
 
 			const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag } = this.getProps();
 
@@ -242,6 +284,22 @@ export class VisualElementDragControls {
 		}
 	}
 
+	/**
+	 * End the active PanSession and release the global drag lock without
+	 * triggering the full cancel() path (no whileDrag reset, no stop animation).
+	 * Used on reparent unmount so the old window listeners are removed and the
+	 * lock is free before the new element's start() acquires it.
+	 */
+	endPanSession() {
+		this.panSession?.end();
+		this.panSession = undefined;
+		const { dragPropagation } = this.getProps();
+		if (!dragPropagation && this.openGlobalLock) {
+			this.openGlobalLock();
+			this.openGlobalLock = null;
+		}
+	}
+
 	private cancel() {
 		this.isDragging = false;
 		const { projection, animationState } = this.visualElement;

src/lib/motion-start/gestures/drag/index.ts

@@ -35,9 +35,34 @@ export class DragGesture extends Feature<HTMLElement> {
 		});
 
 		this.removeListeners = this.controls.addListeners() || noop;
+
+		// If a reparent snapshot is pending, resume the drag gesture on this new element.
+		if (dragControls?.pendingResume) {
+			const { lastPointerEvent, cursorProgress } = dragControls.pendingResume;
+			dragControls.pendingResume = null;
+			// Defer until after projection layout is measured (next microtask).
+			Promise.resolve().then(() => {
+				this.controls.start(lastPointerEvent, { cursorProgress });
+			});
+		}
 	}
 
 	unmount() {
+		// If this element is currently being dragged, save a snapshot so the next
+		// element with the same DragControls can resume the gesture (reparenting).
+		const { dragControls } = this.node.getProps();
+		if (dragControls && this.controls.isDragging && this.controls.lastPointerEvent) {
+			dragControls.pendingResume = {
+				lastPointerEvent: this.controls.lastPointerEvent,
+				cursorProgress: { ...this.controls.cursorProgress },
+			};
+			// End the PanSession so its window listeners don't conflict with the
+			// new element's PanSession, but don't call cancel() so isDragging stays
+			// true (snapshot was just saved above) and the global drag lock is kept
+			// until the new element's start() acquires it.
+			this.controls.endPanSession();
+		}
+
 		this.removeGroupControls();
 		this.removeListeners();
 		super.unmount();

src/lib/motion-start/gestures/drag/use-drag-controls.ts

@@ -1,9 +1,15 @@
-/** 
+/**
 based on framer-motion@11.11.11,
 Copyright (c) 2018 Framer B.V.
 */
 
 import type { VisualElementDragControls, DragControlOptions } from './VisualElementDragControls';
+
+export interface DragResumeSnapshot {
+	lastPointerEvent: PointerEvent;
+	cursorProgress: { x: number; y: number };
+}
+
 /**
  * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
  *
@@ -24,6 +30,16 @@ import type { VisualElementDragControls, DragControlOptions } from './VisualElem
  */
 export class DragControls {
 	private componentControls = new Set<VisualElementDragControls>();
+
+	/**
+	 * Snapshot of an interrupted drag gesture, set by DragGesture.unmount() when
+	 * a dragging element is reparented. The next DragGesture.mount() with this
+	 * same DragControls reads it and resumes the gesture.
+	 *
+	 * @internal
+	 */
+	pendingResume: DragResumeSnapshot | null = null;
+
 	/**
 	 * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
 	 *
@@ -34,6 +50,7 @@ export class DragControls {
 
 		return () => this.componentControls.delete(controls);
 	};
+
 	/**
 	 * Start a drag gesture on every `motion` component that has this set of drag controls
 	 * passed into it via the `dragControls` prop.