fix(DragDropSort): enable mobile drag-and-drop support

Set touch-action: none on the drag activator element (DragButton when
useDragButton is true, wrapper div otherwise) to prevent the browser
from intercepting touch events for native scrolling. Without this,
mobile browsers fire pointercancel before the PointerSensor can
activate the drag.

Also adds activationConstraint: { distance: 8 } to PointerSensor so
the drag only activates after deliberate pointer movement, preventing
accidental drags on both desktop and mobile.

Adds restrictToWindowEdges modifier to DndContext so dragged items
cannot be moved outside the browser viewport. Consumers can override
this via the modifiers prop.

Fixes #12415

Author: logonoff

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<DragDropContainerProps>
   );
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 }
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates
     })
@@ -298,6 +301,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
     <DndContext
       sensors={sensors}
       collisionDetection={collisionDetectionStrategy}
+      modifiers={[restrictToWindowEdges]}
       onDragEnd={handleDragEnd}
       onDragOver={handleDragOver}
       onDragStart={handleDragStart}

packages/react-drag-drop/src/components/DragDrop/Draggable.tsx

@@ -31,7 +31,8 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    ...(!useDragButton && { touchAction: 'none' as const })
   };
 
   return useDragButton ? (
@@ -41,7 +42,12 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       style={style}
       {...props}
     >
-      <DragButton {...attributes} {...listeners} {...(dragButtonAriaLabel && { 'aria-label': dragButtonAriaLabel })} />
+      <DragButton
+        {...attributes}
+        {...listeners}
+        {...(dragButtonAriaLabel && { 'aria-label': dragButtonAriaLabel })}
+        style={{ touchAction: 'none' }}
+      />
       {children}
     </div>
   ) : (