fix: fixed scrolling by draggable on mobile

This commit is contained in:
2025-08-13 18:18:37 +04:00
parent 0836e4f0ca
commit 7932f3f5c8
2 changed files with 12 additions and 20 deletions

View File

@ -1,33 +1,28 @@
import { import {
KeyboardSensor, KeyboardSensor,
PointerSensor, MouseSensor,
TouchSensor, TouchSensor,
useSensor, useSensor,
useSensors, useSensors,
} from "@dnd-kit/core"; } from "@dnd-kit/core";
import { sortableKeyboardCoordinates } from "@dnd-kit/sortable"; import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
import useIsMobile from "@/hooks/useIsMobile";
const useDndSensors = () => { const useDndSensors = () => {
const isMobile = useIsMobile();
const sensorOptions = {
activationConstraint: isMobile
? {
delay: 500,
tolerance: 5,
}
: {
distance: 5,
},
};
return useSensors( return useSensors(
useSensor(PointerSensor, sensorOptions), useSensor(MouseSensor, {
activationConstraint: {
distance: 8,
},
}),
useSensor(KeyboardSensor, { useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates, coordinateGetter: sortableKeyboardCoordinates,
}), }),
useSensor(TouchSensor, sensorOptions) useSensor(TouchSensor, {
activationConstraint: {
delay: 300,
tolerance: 5,
},
})
); );
}; };

View File

@ -18,12 +18,9 @@ const DragHandle = ({ id, children, style, disabled }: Props) => {
<div <div
{...attributes} {...attributes}
{...listeners} {...listeners}
onTouchStart={e => !disabled && e.stopPropagation()}
onTouchMove={e => !disabled && e.stopPropagation()}
style={{ style={{
width: "100wv", width: "100wv",
cursor: disabled ? "default" : "grab", cursor: disabled ? "default" : "grab",
touchAction: disabled ? "auto" : "none",
...style, ...style,
}} }}
ref={setNodeRef}> ref={setNodeRef}>