diff --git a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx index 101e666dc91..b828c44783c 100644 --- a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx +++ b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx @@ -27,6 +27,7 @@ export const DragButton: React.FunctionComponent = ({ className={css(className)} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} + style={{ touchAction: 'none' }} icon={ diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx index 6e34564218a..de34c57dd53 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 ? (