authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-03-09 14:25:06-07:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-03-09 15:08:10-07:00
loge42036485fd7fe19c8536ba3fd59573ebf592349
treed8c0ac28f71da7c22d7578c1637d0e04e3cfe9ae
parentf9c3aff294e7493751f36504f65089fd2d5586fd

Improve project drag collision detection in sidebar

- Prefer pointer-based hit testing during project reordering - Fall back to corner-based collision to make drop targeting more reliable

1 files changed, 12 insertions(+), 2 deletions(-)

apps/web/src/components/Sidebar.tsx+12-2
......@@ -14,9 +14,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
1414import {
1515 DndContext,
1616 type DragCancelEvent,
17 type CollisionDetection,
1718 PointerSensor,
1819 type DragStartEvent,
19 closestCenter,
20 closestCorners,
21 pointerWithin,
2022 useSensor,
2123 useSensors,
2224 type DragEndEvent,
......@@ -841,6 +843,14 @@ export default function Sidebar() {
841843 activationConstraint: { distance: 6 },
842844 }),
843845 );
846 const projectCollisionDetection = useCallback<CollisionDetection>((args) => {
847 const pointerCollisions = pointerWithin(args);
848 if (pointerCollisions.length > 0) {
849 return pointerCollisions;
850 }
851
852 return closestCorners(args);
853 }, []);
844854
845855 const handleProjectDragEnd = useCallback(
846856 (event: DragEndEvent) => {
......@@ -1241,7 +1251,7 @@ export default function Sidebar() {
12411251
12421252 <DndContext
12431253 sensors={projectDnDSensors}
1244 collisionDetection={closestCenter}
1254 collisionDetection={projectCollisionDetection}
12451255 modifiers={[restrictToVerticalAxis, restrictToParentElement]}
12461256 onDragStart={handleProjectDragStart}
12471257 onDragEnd={handleProjectDragEnd}