Questions tagged [dnd-kit]
46 questions
2
votes
0 answers
Test Drag and drop with jest (dnd-kit)
I'm trying to test drag and drop with dnd-kit (testing-library / jest) and I can't,
I tested to trigger the listeners events of the useDraggable hook,
it.only("should pass the pack in the activatedPack zone by drag and drop", async () => {
…
MohLsl87
- 21
- 2
2
votes
1 answer
drag and drop library dnd-kit not working in my React example
I've been trying to implement a drag and drop library called dnd-kit for React.
I been working on a very basic example with help of the guide for sorting list with overlay but it doesn't work and i can't tell what am i doing wrong.
Here is the…
BlowFish
- 326
- 4
- 10
1
vote
1 answer
The dragged item is not displayed outside the virtualized list (react-virtuoso, @dnd-kit)
I am trying to use dnd-kit together with react-virtuoso and everything works, except that the dragged item is not displayed outside the virtualized list
How to make the dragged item appear outside the virtualized list? High z-index on the dragged…
Hartaithan.
- 326
- 3
- 14
1
vote
1 answer
dnd-kit sortable animation is triggering twice on DragEnd
When I swap two distant items on a grid it 'redoes' the swap animation (going backwards then forwards again). It works fine when the items are very near as you can see in the following gif:
I've followed the Sortable docs but I can't figure out why…
Natan Fernandes
- 121
- 6
1
vote
1 answer
Wait with transition for element to be dropped @dnd-kit React
I'm using @dnd-kit in my React project and I try to insert elements from lower list to the upper list. I want to control the transition of placeholder to wait until the element gets inserted, so it does not jump. Unfortunately the transition happens…
imalgrab
- 23
- 6
1
vote
1 answer
@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. Dragging elements works perfect for me. My problem is that based on some condition I need to block the…
davidesp
- 3,743
- 10
- 39
- 77
1
vote
2 answers
DnD-Kit Incorrect behavior while trying to move item to another container in ReactJs
I would appreciate any help with this case, so if you see any minor issue - please, write me. There will be rather a lot of code.
I was trying to implement 'dnd-kit/sortable' into my bug tracker app. I have Kanban board consisting of four repeating…
rey2197
- 71
- 8
1
vote
1 answer
Dnd-kit sortable list with drag handle - setActivatorNodeRef has no effect
I have an issue with dnd-kit library, im trying to achieve sortable list with drag handle activator. The issue is i cannot set drag handle (button) to be only drag activator, instead entire parent element stays active.
SortableItem component:
…
Sojtin
- 2,714
- 2
- 18
- 32
1
vote
1 answer
How to use useDraggable / useSortable hooks of dnd-kit library properly?
I'm trying to create a simple calculator with React and dnd-kit. Elements of calculator can be dragged to droppable area and can be sorted inside of it. You can see a problem on the gif: when I drag element from left side to droppable area, there is…
rgdzv
- 433
- 5
- 18
1
vote
0 answers
React final form- get the actual state to zoom to a dragging element in the form
I'm making a form with dragging boxes. The form was created with react-final-form, to drag elements I'm using- https://dndkit.com, to zoom to element- react-zoom-pan-pinch.
I want to zoom to elements in my form. I added the function:
onClick={() =>…
Shan
- 45
- 4
1
vote
1 answer
Dragging item is moves faster than cursor
Im using dnd-kit to drag and drop buttons, but when I drag them the button moves faster than the cursor and ends up in a different place than the cursor, as you can see
This is the code Im using:
function GridWard(){
return(
subharb
- 3,374
- 8
- 41
- 72
0
votes
0 answers
Drag-and-Drop Issue with Dnd-Kit in React: Card Appears Underneath Placeholder Despite High z-index
I'm working on a React project that involves a game board with drag-and-drop functionality. I'm using Dnd-Kit to handle the drag-and-drop interactions.
I drag my cards to a specific placeholder. the first drag and drop is working well, but after…
labelle
- 420
- 4
- 19
0
votes
0 answers
How to save new position for items after draggable and sortable in dnd-kit use useState and Redux React?
I have to make: after adding items from the EditDsrSubWidgets component that is in SideBar, the items are rendered in DrsTargetComponent component, outside of SideBar (already done), then be able to drag and sort them, and save them on a new…
0
votes
0 answers
using dnd-kit while dragging an item suddenly it return to the original position and isDragging is set to false
I am using the dnd-kit to have 2 lists of items and I can move items between these lists or sort the list, but while I am dragging an item suddenly it returns to the original position and isDragging is false again. Did someone face this same…
0
votes
0 answers
Unexpected Instant Transitions with @dnd-kit and react-hook-form's useFieldArray
I'm currently facing an issue integrating @dnd-kit with react-hook-form's useFieldArray. I'm experiencing unexpected instant transitions whenever a dragged item is dropped.
To avoid immediate updates to the fields, I've created a separate copy for…
The Truth
- 87
- 11