Improve drag and drop interactions by adjusting activation constraints

Adjusts drag activation constraints for pointer and touch sensors, enabling instant drag initiation in edit mode with a lower activation distance and no delay, while maintaining a higher threshold and delay outside of edit mode.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1b66c87b-bec3-4f9e-b161-b4789c48a6fa
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/qrzw3bH
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-21 07:07:31 +00:00
parent 26f8e45db6
commit bc47a08559
+15 -5
View File
@@ -254,13 +254,23 @@ export default function ServicesPage() {
return rows; return rows;
}, [services, orderedIds]); }, [services, orderedIds]);
// Touch sensor uses delay so a tap-to-open isn't misread as a drag; // Drag activation is tuned per-mode:
// pointer sensor needs only the tiny activation distance so mouse // * Outside edit mode we never want a drag (cards are only tappable
// drags feel responsive on the desktop preview. // to place an order), so a slightly higher distance threshold
// keeps the long-press-to-enter-edit gesture clean.
// * Inside edit mode the user has already opted into reordering, so
// drags should start instantly with no touch delay — matching the
// iOS home-screen "jiggle" feel. A tiny `distance: 2` activation
// still tolerates the natural finger jitter that happens before
// intentional movement, without making drags feel sluggish.
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(PointerSensor, {
activationConstraint: { distance: editMode ? 2 : 6 },
}),
useSensor(TouchSensor, { useSensor(TouchSensor, {
activationConstraint: { delay: 150, tolerance: 8 }, activationConstraint: editMode
? { distance: 2 }
: { delay: 150, tolerance: 8 },
}), }),
); );