diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx index 9abfabbadd1..3acfc4a4357 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx @@ -21,6 +21,7 @@ import { DragCancelEvent } from '@dnd-kit/core'; import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable'; +import { restrictToWindowEdges } from '@dnd-kit/modifiers'; import { Draggable } from './Draggable'; import { DraggableDataListItem } from './DraggableDataListItem'; import { DraggableDualListSelectorListItem } from './DraggableDualListSelectorListItem'; @@ -103,7 +104,9 @@ export const DragDropContainer: React.FunctionComponent ); const sensors = useSensors( - useSensor(PointerSensor), + useSensor(PointerSensor, { + activationConstraint: { distance: 8 } + }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) @@ -298,6 +301,7 @@ export const DragDropContainer: React.FunctionComponent = ({ const style = { transform: CSS.Transform.toString(transform), - transition + transition, + ...(!useDragButton && { touchAction: 'none' as const }) }; return useDragButton ? ( @@ -38,7 +39,7 @@ export const Draggable: React.FunctionComponent = ({ style={style} {...props} > - + {children} ) : (