[英]@dnd-kit not allowing to prevent dragging items
I'm using this npm
package: @dnd-kit
https://github.com/clauderic/dnd-kit to be able to drag drop elements up and down in a vertical list.我正在使用这个npm
package: @dnd-kit
https://github.com/clauderic/dnd-kit以便能够在垂直列表中上下拖放元素。 Dragging elements works perfect for me.拖动元素非常适合我。 My problem is that based on some condition I need to block the dragging of the elements at all.我的问题是,基于某些条件,我需要完全阻止元素的拖动。
To reproduce the issue you can follow these steps:要重现该问题,您可以按照以下步骤操作:
$ git clone https://github.com/clauderic/dnd-kit
$ cd dnd-kit
$ git checkout master # currently: d5c4732d7262c773db338850e9b2bb386c938ddf
$ yarn
$ yarn start:storybook
On file: /stories/2 - Presets/Sortable/1-Vertical.story.tsx
, just add the highlighted text on the screenshot below...在文件: /stories/2 - Presets/Sortable/1-Vertical.story.tsx
中,只需在下面的屏幕截图中添加突出显示的文本...
Here is the added text so you can copy paste:这是添加的文本,因此您可以复制粘贴:
export const LockedBothAxis = () => (
<Sortable
{...props}
modifiers={[restrictToHorizontalAxis, restrictToVerticalAxis, restrictToWindowEdges]}
/>
);
where you can see my intention is to block the dragging on both axis: horizontal
and vertical
.你可以看到我的意图是阻止两个轴上的拖动: horizontal
和vertical
。 Whenever the block condition is true
I tried by using those 2 modifiers above: { restrictToHorizontalAxis, restrictToVerticalAxis }
(which doesn't totally work).每当块条件为true
时,我都会尝试使用上面的 2 个修饰符: { restrictToHorizontalAxis, restrictToVerticalAxis }
(这并不完全有效)。
Now go to: http://localhost:6006/?path=/story/presets-sortable-vertical--locked-both-axis and try to drag the items.现在 go 到:http://localhost:6006/?path=/story/presets-sortable-vertical--locked-both-axis 并尝试拖动项目。
If you try a short distance dragging then you will notice the dragging doesn't work (so far so good).如果您尝试短距离拖动,那么您会注意到拖动不起作用(到目前为止还不错)。
My problem is: If you try a long distance dragging (all the way up or down) then you will notice that you can actually drag the items.我的问题是:如果您尝试长距离拖动(一直向上或向下),那么您会注意到您实际上可以拖动项目。
What I need: When the user long presses an item, the item gets highlighted but when he tries a short or a long distance dragging, the item doesn't get dragged.我需要的是:当用户长按某个项目时,该项目会突出显示,但当他尝试短距离或长距离拖动时,该项目不会被拖动。
Below you have a demostration of my issue, where I try first a short distance dragging up and down and the item doesn't get dragged (so far so good).下面是我的问题的演示,我首先尝试短距离上下拖动并且项目没有被拖动(到目前为止一切顺利)。 But later I try a long distance dragging down and the item gets dragged (my issue)...但后来我尝试长距离向下拖动并且项目被拖动(我的问题)......
Any idea on how to block the dragging at all even if the user does a long distance dragging?即使用户进行长距离拖动,关于如何完全阻止拖动的任何想法?
Try to add disabled: true to useSortable or useDraggable尝试添加disabled: true到 useSortable 或 useDraggable
const [disableDnD, setDisableDnD] = useState(true);
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled: disableDnD });
Here are props: https://docs.dndkit.com/api-documentation/draggable/usedraggable#arguments这是道具: https://docs.dndkit.com/api-documentation/draggable/usedraggable#arguments
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.