我使用的是npm
包:@dnd-kit
https://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并尝试拖动这些项目。
如果你尝试短距离拖动,那么你会注意到拖动不起作用(到目前为止一切顺利)。
**我的问题是:**如果你尝试长距离拖动(一直向上或向下),那么你会注意到你实际上可以拖动项目。
**我需要什么:**当用户长按某个项目时,该项目会突出显示,但当他尝试短距离或长距离拖动时,该项目不会被拖动。
下面你有一个演示我的问题,在那里我尝试第一次短距离上下拖动和项目没有得到拖动(到目前为止一切顺利).但后来我尝试长距离向下拖动和项目得到拖动(我的问题)...
有没有什么想法,如何阻止拖动在所有,即使用户做了长距离拖动?
1条答案
按热度按时间2admgd591#
尝试添加 * 禁用:true* 使用可排序或可拖动
以下是一些小 prop :https://docs.dndkit.com/api-documentation/draggable/usedraggable#arguments