Stack Overflow
Stack Overflow

Questions tagged [react-beautiful-dnd]

Use this tag with questions related to the react-beautiful-dnd library.

React beautiful dnd is a package available on NPM, that can be used to implement drag and drop functionality in your react applications.

Use this tag for questions relating specifically to this package.

Link to react-beautiful-dnd on Github

330 questions
34
votes
17 answers

React beautiful DND - I get "Unable to find draggable with id: 1"

In the code below the UI renders two "Column" components and each column contains two draggable elements called "Tasks". When the user drags a "Task" between columns the code works - up to a point. When the user continuously drags the task…
William
  • 4,422
  • 17
  • 55
  • 108
26
votes
11 answers

React beautiful DnD drag out of position problem

I created a draggable drag and drop table with draggable rows. I'm using react beautiful-dnd for this. When I drag a row, the row gets out of position instead on the position of my cursor. When I drag a row, the row gets position: fixed and some…
user10960236
15
votes
1 answer

Change react-beautiful-dnd draggable click area

I am using react-beautiful-dnd Cant find any solution for change Draggable click area. I need drag items when I click in custom area (not at whole Draggable element). For example, Draggable element has Icon and text. Default behavior let me drag…
markovpavel.ru
  • 747
  • 1
  • 5
  • 13
12
votes
1 answer

beautiful dnd - passing draggable data onDropEnd

i have some data that is available on my draggable elements. i would like to use that data onDragEnd, but i didn't find a way to pass any draggable data excepts the draggableId which is passed into the result on the the onDragEnd event. basically…
Jordan
  • 145
  • 8
11
votes
5 answers

How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js

When I try to use react-beautiful-dnd with next.js (or in general with server side rendering), after reorder items and refresh the page I get this error: react-dom.development.js:88 Warning: Prop `data-rbd-draggable-context-id` did not match.…
dna
  • 2,097
  • 1
  • 11
  • 35
10
votes
3 answers

React beautiful DND - "Unable to find draggable with id: X"

I am trying to use react-beautiful-dnd for drag n drop sorting of a list but my elements are not draggable and I get Unable to find draggable with id: X. I have cross-check my code with examples in docs but unable to find what I need to fix. I am…
Solaris
  • 674
  • 7
  • 22
9
votes
2 answers

How can I make `react-beautiful-dnd` not trigger a `react-transition-group` animation?

Video demonstrating my issue: https://i.imgur.com/L3laZLc.mp4 I have a simple app where you can add Cards to 2 different Rows. When a card is added to a row, I'm using react-transition-group to trigger an "enter" animation. However, I also have…
damon
  • 2,687
  • 8
  • 25
  • 35
8
votes
0 answers

React-beautiful-dnd: Prevent page from scrolling when draggable is being dragged near edge of page

I'm using react-beautiful-dnd in a project and when I'm dragging a draggable, the page auto scrolls if I drag it near the top, bottom or sides of the page. I could theoretically fix this problem by placing the drag and drop container in the middle…
Brownie Cart
  • 81
  • 2
8
votes
5 answers

react-beautiful-dnd - Invariant failed: Cannot find droppable entry with id

I was following along with a react-beautiful-dnd tutorial that uses react component classes instead of hooks. I was writing an equivalent program with modern react syntax when I came across this error. Invariant failed: Cannot find droppable entry…
Matthew Roloff
  • 81
  • 1
  • 2
7
votes
0 answers

How to remove drag start animation from react-beautiful-dnd?

I want to create a "palette" to drag from using react-beautiful-dnd. This will be like a palette in a drawing app, ie. (a copy of) the draggable will remain in the palette during the drag, and the palette will not animate at drag start or drag…
Matt
  • 4,261
  • 4
  • 39
  • 60
7
votes
0 answers

How to access the DOM element of a third party component that doesn't forward ref

I am working with a third-party component which doesn't forward the ref to its DOM component and unfortunately, I need to get a ref to its DOM element in my code. The code below obviously fails: const ThirdPartyComponent = (props) => { return…
Gyum Fox
  • 3,287
  • 2
  • 41
  • 71
7
votes
2 answers

In react-beautiful-dnd I conterminously get "Droppable: unsupported nested scroll container detected."

Any idea why in react-beautiful-dnd I conterminously get "Droppable: unsupported nested scroll container detected." ? react-beautiful-dndDroppable: unsupported nested scroll container detected. A Droppable can only have one scroll parent (which can…
Dan I
  • 71
  • 1
  • 1
  • 2
6
votes
1 answer

how to disable draggable property for one item in react-beautiful-dnd

I am using typescript react-beautiful-dnd to drag and drop items from one container to other container and viseversa. In one container there are user names and other container has only one name called "Unassigned". Below are the data looks. import…
snag
  • 61
  • 1
  • 2
6
votes
1 answer

React-Beautiful-dnd element not draggable after 2,3 tries

Initially the element is draggable from one column to the other, but after 2-3 item drags, items which are on certain index stops draggins, like I'm dragging an item from column-1 index 0 to column-2 index 0, but after 1-2 more tries, index 0 item…
Devansh_Geek
  • 131
  • 2
  • 10
6
votes
1 answer

Keep draggable in its list while dragging (react-beautiful-dnd)

How can i keep draggable in it's original list while dnd action in progress? E.g. i want to drag item "copy" and hold it's original where it was at the same time. After onDragEnd i can copy data, but while dragging it looks wrong and can confuse…
mjollneer
  • 1,005
  • 2
  • 19
  • 36
1
2 3
…
21 22