Stack Overflow
Stack Overflow

Questions tagged [dnd-kit]

46 questions
9
votes
1 answer

react dnd-kit sortable : why is the first element of my sortable not draggable?

I am trying to build a very basic sortable using react dnd-kit, and everything works, except one thing : the first element of my sortable array doesn't move when it is dragged (it moves when other elements are dragged on it, which makes this even…
Trevodorax
  • 391
  • 1
  • 8
6
votes
1 answer

Touch users can't drag and drop in React app

I followed the quick start for the dnd kit React library, and it lets me drag and drop just fine with a mouse. However, when I try to use the same page with Chrome on Android, I can't drag the item. It looks like it starts moving and then gets stuck…
Don Kirkby
  • 53,582
  • 27
  • 205
  • 286
3
votes
1 answer

Problem with scrolling list on mobile when every element is draggable

I have a problem with scrolling list on mobile after I put DnD on list elements. I have a list of cards. And I want every card to be draggable. I use touchAction: 'none', without it there was a problem to scroll without dragging: the card which was…
meguk
  • 70
  • 5
3
votes
1 answer

DndKit transition delay on drop, useSortable

When I drop an element to resort, there's a slight transition issue where the items goes back to its' original position & then transitions. Below I added a link to video & code. Really, I don't want any transition delay, etc. I feel like it could be…
Matthew
  • 41
  • 3
3
votes
2 answers

How to update the State on a DnD Component

I'm currently trying to use a Drag & Drop Library called dnd-kit and its hook called useSortable. So far I did achieved to make everything draggable the way I like, unfortunately somehow its not possible for me to update the state accordingly to the…
K.Kröger
  • 97
  • 10
2
votes
1 answer

Preserve the size of dragged item while dragging it over another item in react

I am creating an app where different sentences can be ranked using drag and drop feature using react. My problem is whenever an item of smaller size is dragged over item of larger size, the smaller item streches. When an item with larger size is…
Sitashma Rajbhandari
  • 21
  • 2
2
votes
0 answers

Dnd kit buttons don't work. How can I fix it?

I'm learning the D&D kit. When I include the {...listeners} attribute, all the buttons on my card stop working. My card

{title}

SurikeN
  • 21
  • 2
2
votes
0 answers

How do I make multiple sortable containers with @dnd-kit?

I'm trying to learn to use @dnd-kit with React for a couple of projects. The toolkit is clearly very powerful, versatile, and robust. However, the documentation can be unclear at times. Additionally, they have an amazing set of different examples,…
DJFancyAl
  • 21
  • 3
2
votes
1 answer

Why is the Transform and Translate data null/undefined using DND-Kit

Firstly, Thank you for looking at my problem. I am trying to implement and learn the logic of dnd-kit in react, & I have created this webapp where the elements that are being mapped into a SortableContext are react components. As Shown in the image…
roverrr
  • 59
  • 3
2
votes
2 answers

How to make a draggable and droppable div also editable?

I am using dnd-kit/core and am having trouble making my UserComponent editable via an edit button. I don't think the edit button I wrote is compatible with dnd-kit maybe (since it doesn't work)? Any tips or solutions would be much…
Dan Gleason
  • 21
  • 2
2
votes
1 answer

How to handle free drag'n drop with dnd-kit?

I'm trying to create a simple sticky notes app by using @dnd-kit. I've found a lot of sortable examples, but can't find any free drag'n-drop examples. I've created a simple codesandbox to help you understand my problem. I'm able to drag and drop,…
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
2
votes
1 answer

@dnd-kit/sortable : Prevent link from activating when dragged item is dropped

My sortable item contains a link so when I click on it to drag and drop. Problem is after I drop, it navigates to the link. How can I prevent this?
user17443811
  • 103
  • 3
2
votes
0 answers

DND kit sensors testing using Jest

I am trying to write unit tests for setting up of DND kit sensors (mouse, touch, keyboard). So basically, at this point, I just want a test that those sensors have been set up correctly. Does anyone has any idea how to do this in React using Jest? I…
Deni Targ
  • 21
  • 1
2
votes
2 answers

Dnd-kit Multiple containers: items jump disorderly after quick drag and drops

As seen in the attached video clip, I can move the items in container A to B without any problem. But if the speed of my drag increase, the list in the over container starts to behave abnormally. I tried the example multi container story but didn't…
Sydth
  • 31
  • 1
  • 3
2
votes
1 answer

Dnd-kit: active item loses order when dragged on Droppable

I'm facing a problem using @dnd-kit. The soring part works well (for example when I start dragging 1st element it obvioeulsy does sort), but when I reach a droppable element (green Thrash), the sorting breaks and the 1st element goes back. You can…
Emil Mąka
  • 107
  • 6
1
2 3