@dnd-kit 不允许阻止拖动项目答案

【问题标题】：@dnd-kit not allowing to prevent dragging items@dnd-kit 不允许阻止拖动项目
【发布时间】：2023-02-02 20:43:56
【问题描述】：

我正在使用这个npm包：@dnd-kithttps://github.com/clauderic/dnd-kit能够在垂直列表中上下拖放元素。拖动元素非常适合我。我的问题是，基于某些条件，我需要完全阻止元素的拖动。

要重现该问题，您可以按照以下步骤操作：

$ git clone https://github.com/clauderic/dnd-kit
$ cd dnd-kit
$ git checkout master # currently: d5c4732d7262c773db338850e9b2bb386c938ddf
$ yarn
$ yarn start:storybook

在文件中：/stories/2 - Presets/Sortable/1-Vertical.story.tsx，只需在下面的屏幕截图中添加突出显示的文本...

这是添加的文本，因此您可以复制粘贴：

export const LockedBothAxis = () => (
  <Sortable
    {...props}
    modifiers={[restrictToHorizontalAxis, restrictToVerticalAxis, restrictToWindowEdges]}
  />
);

你可以看到我的意图是阻止两个轴上的拖动：horizontal 和vertical。每当块条件是 true 时，我尝试使用上面的两个修饰符：{ restrictToHorizontalAxis, restrictToVerticalAxis }（这并不完全有效）。

现在转到：http://localhost:6006/?path=/story/presets-sortable-vertical--locked-both-axis 并尝试拖动项目。

如果您尝试短距离拖动，那么您会注意到拖动不起作用（到目前为止还不错）。

我的问题是：如果您尝试长距离拖动（一直向上或向下），那么您会注意到您实际上可以拖动项目。

我需要的：当用户长按某个项目时，该项目会突出显示，但当他尝试短距离或长距离拖动时，该项目不会被拖动。

下面是我的问题的演示，我首先尝试短距离上下拖动，但项目没有被拖动（到目前为止一切顺利）。但后来我尝试长距离向下拖动并且项目被拖动（我的问题）......

即使用户进行长距离拖动，关于如何完全阻止拖动的任何想法？

【问题讨论】：

标签： javascript reactjs dnd-kit

【解决方案1】：

尝试添加禁用：真useSortable 或 useDraggable

const [disableDnD, setDisableDnD] = useState(true);


const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled: disableDnD });

这是道具： https://docs.dndkit.com/api-documentation/draggable/usedraggable#arguments

【讨论】：