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

3ks5zfa0  于 2023-02-04  发布在  React
关注(0)|答案(1)|浏览(594)

我使用的是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]}
  />
);

你可以看到我的意图是阻止两个轴上的拖动:horizontalvertical。每当块条件为true时,我尝试使用上述两个修改符:{ restrictToHorizontalAxis, restrictToVerticalAxis }(它不完全起作用)。
现在转到:http://localhost:6006/?path = /story/presets-sortable-vertical-locked-both-axis并尝试拖动这些项目。
如果你尝试短距离拖动,那么你会注意到拖动不起作用(到目前为止一切顺利)。

**我的问题是:**如果你尝试长距离拖动(一直向上或向下),那么你会注意到你实际上可以拖动项目。
**我需要什么:**当用户长按某个项目时,该项目会突出显示,但当他尝试短距离或长距离拖动时,该项目不会被拖动。

下面你有一个演示我的问题,在那里我尝试第一次短距离上下拖动和项目没有得到拖动(到目前为止一切顺利).但后来我尝试长距离向下拖动和项目得到拖动(我的问题)...

有没有什么想法,如何阻止拖动在所有,即使用户做了长距离拖动?

2admgd59

2admgd591#

尝试添加 * 禁用:true* 使用可排序或可拖动

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

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

以下是一些小 prop :https://docs.dndkit.com/api-documentation/draggable/usedraggable#arguments

相关问题