@dnd-kit无法完全阻止拖拽求助：长距离拖拽仍生效

问题根源 #

你用restrictToHorizontalAxis和restrictToVerticalAxis修饰符的思路不对——这类修饰符是拖拽启动后限制移动方向，但只要拖拽距离超过默认阈值（通常5px），拖拽事件还是会被触发，只是元素移动被限制，视觉上可能出现短位移，无法完全阻止拖拽行为。

正确解决方案 #

要实现「长按高亮但完全禁止拖拽」，核心是阻止拖拽事件启动，而非限制拖拽后的移动。可以通过以下方式实现：

1. 禁用拖拽触发 #

直接给SortableItem设置disabled: true，会完全禁用该元素的拖拽功能，无论拖拽距离长短都不会触发拖拽。

2. 独立实现长按高亮 #

将长按高亮与拖拽逻辑解耦，用独立的长按事件实现高亮，不依赖拖拽的触发机制。可以用@dnd-kit/utilities提供的useLongPress钩子，或自行写定时器实现。

代码示例（适配你的Storybook场景） #

修改/stories/2 - Presets/Sortable/1-Vertical.story.tsx中的LockedBothAxis示例：

import {useState} from 'react';
import {useLongPress} from '@dnd-kit/utilities';
import {SortableItem, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';

const LockedBothAxis = () => {
  const items = [...Array(5).keys()].map(i => ({id: `item-${i}`, value: `Item ${i + 1}`}));
  const [highlightedId, setHighlightedId] = useState<string | null>(null);

  // 长按高亮逻辑，500ms触发
  const getLongPressHandlers = (id: string) => useLongPress({
    onLongPress: () => setHighlightedId(id),
    onCancel: () => setHighlightedId(null),
    delay: 500,
  });

  return (
    <SortableContext items={items.map(i => i.id)} strategy={verticalListSortingStrategy}>
      {items.map((item) => (
        <SortableItem
          key={item.id}
          id={item.id}
          disabled={true} // 完全禁用拖拽
          style={{
            padding: '1rem',
            margin: '0.5rem 0',
            border: '1px solid #eee',
            borderRadius: '4px',
            backgroundColor: highlightedId === item.id ? '#f0f0f0' : 'white',
            cursor: 'pointer',
          }}
          {...getLongPressHandlers(item.id)} // 绑定长按事件
        >
          {item.value}
        </SortableItem>
      ))}
    </SortableContext>
  );
};

关键说明 #

• disabled: true直接阻止拖拽初始化，彻底避免拖拽行为，比修饰符的限制更彻底。
• 长按高亮通过独立的useLongPress实现，和拖拽逻辑完全分离，精准满足「长按触发高亮但不拖拽」的需求。
• 如果需要动态控制禁用状态（比如部分元素可拖），只需将disabled设为条件表达式，如disabled={item.isLocked}。

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