如何使用@hello-pangea/dnd（原react-beautiful-dnd）调整触摸灵敏度

针对你遇到的移动端需长按才能触发拖拽的问题，核心解决方案是利用hello-pangea/dnd内置的触摸配置项调整触发延迟，而非手动模拟鼠标事件，具体操作如下：

1. 调整touchStartDelay参数 #

hello-pangea/dnd的DragDropContext组件提供了touchStartDelay属性，用于设置触摸后触发拖拽的延迟时间（默认值通常为200ms左右）。将该值设为0或较小数值，即可实现触摸立即触发拖拽：

import { DragDropContext } from '@hello-pangea/dnd';

// 配置touchStartDelay取消长按延迟
<DragDropContext 
  touchStartDelay={0} 
  onDragEnd={yourDragEndHandler}
>
  {/* 你的可拖拽列表组件 */}
</DragDropContext>

2. 禁用浏览器默认触摸行为 #

部分情况下，浏览器的默认触摸操作（如滑动、缩放）会干扰拖拽触发，可通过CSS为拖拽元素添加touch-action: none来规避：

.draggable-list-item {
  touch-action: none;
}

为什么手动触发onMouseDown无效？ #

hello-pangea/dnd的触摸交互逻辑是内部封装的，并非简单映射鼠标事件。直接在onTouchStart中调用provided.dragHandleProps.onMouseDown无法触发库的触摸拖拽流程，必须依赖其提供的配置项来调整行为。

内容的提问来源于stack exchange，提问作者Tyler Maxey