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.

Fixes #12415

Author: logonoff

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

@@ -103,7 +103,9 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   );
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 }
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates
     })

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

@@ -28,7 +28,8 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
   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<DraggableProps> = ({
       style={style}
       {...props}
     >
-      <DragButton {...attributes} {...listeners} />
+      <DragButton {...attributes} {...listeners} style={{ touchAction: 'none' }} />
       {children}
     </div>
   ) : (