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
1
vote
2 answers

react-beautiful-dnd: Prevent the rest of draggable items from reordering / moving up and replacing the item being dragged

In a single Droppable, I have mapped out an array of items, each as its own Draggable. My code is working properly and is doing what it's supposed to (i.e., I can move each Draggable individually). I'm just wondering if there's a way to stop the…
09fruits
  • 223
  • 3
  • 11
1
vote
0 answers

React-beautiful-dnd flat data structure to nested

I am having a list of layers (sort of like in photoshop) and I need the layers to be able to combine and create a group. I know react-beautiful-dnd does not support nesting and dragging from parent to child and vice versa so I would like to keep…
machve
  • 61
  • 1
  • 3
1
vote
1 answer

How to make sure that Draggable component do not go ouside the Dropable Area or some specific div in react-beautiful-dnd?

How to make sure that Draggable component do not go ouside the Dropable Area or some specific div in react-beautiful-dnd?? I want to make sure that the draggable component do not go outside of some specific div or area or outside dropable area. In…
Rajat Verma
  • 420
  • 1
  • 7
  • 19
1
vote
0 answers

How to get position(x y coordinates) of moving objects in React Beautiful DND?

I am using React Beautiful DND and i would like to get position(X Y) of objects that i drag on screen. Anyone knows how to get that?
noBoom
  • 127
  • 2
  • 9
1
vote
1 answer

react-beautiful-dnd drag clone from a list

I'm trying to achieve something like this: https://codesandbox.io/s/40p81qy7v0?file=/index.js It works well in the editor from the sandbox, but when I'm running the code on my computer it doesn't work as in the example. When dragging something the…
Vladut Clapou
  • 11
  • 2
1
vote
0 answers

Fixed-position headers in react-beautiful-dnd droppable

I have a list of items that have periodic header labels to group the items visually. I want the headers to stay in place while dragging. However, all headers below the dragging item move up by (seemingly) the height of the item. How can I get the…
Benck
  • 515
  • 1
  • 5
  • 17
1
vote
0 answers

How to create sortable tree with reactjs DND? (How to create recursive multi lists in react-beautiful-dnd? )

In this codesandbox you can see a tree of elements that you can drag each one of them, but the problem you can drop each element in spsefec dropable area. I tried to add {...prov.droppableProps} to the draggable div to be draggable and dropable at…
Ali Husham
  • 816
  • 10
  • 31
1
vote
0 answers

React Beautiful DnD unable to drop items to the bottom of a list or outside viewport

I have a simple react dnd list that I need to drop items into from another list. When there are too many items in the list and the vertical scroll bar is present, it is not allowing me to add. I would need to scroll up to the top and drop the item…
J Doh'
  • 63
  • 7
1
vote
0 answers

Drag and drop error and unable to flip item

I have problem when i will transfer all items to one group, next I can't move them to another one because I throw a bug : Unable to find draggable with id: X example drag and drop located here :…
codecodecarlos
  • 49
  • 2
1
vote
0 answers

Couldn't find draggable element with id using react-beautiful-dnd

I have been trying to implement a drag and drop functionality using the react-beautiful-dnd library. I am displaying some buttons from the initial state of redux and trying to make those items draggable. But, for some reasons,I am having an error in…
ninja
  • 167
  • 2
  • 12
1
vote
1 answer

React beautiful dnd with html video not bubbling events

I am using react beautiful dnd for draging images and videos in a horizontal list. The images/videos are wrapped with a div (position set to relative). It works well for images, but for videos it doesn't work. It seems that the html video element…
user3125470
  • 109
  • 10
1
vote
1 answer

React-beautiful-dnd typescript compiler issues

I just upgraded react and react-beautiful-dnd to the latest versions and I get a lot of type errors. This is my code: {sortedDimensions.map((dimension: any, index: number) => (
arunmmanoharan
  • 2,535
  • 2
  • 29
  • 60
1
vote
0 answers

Pickup and Move Lag in React Beautiful DnD with many Draggables

I am trying to replicate the React Beautiful DnD example shown here: https://react-beautiful-dnd.netlify.app/?path=/story/board--large-data-set There are about 500 draggables on that page, but there is relatively little lag when picking up the…
Chris
  • 23
  • 1
  • 4
1
vote
1 answer

react-beautiful-dnd - adding Lists in next row if more than 4 Lists exist

I'm using react-beautiful-dnd to drag and drop team members in different team lists. I have multiple Team lists, and a button which adds a new Team list. After I add 4 teams, I would like the 5th Team List to be on the second row. Is this possible?…
user1893649
  • 167
  • 2
  • 14
1
vote
1 answer

Add fade out animation on dropped item with React Beautiful DND

I am using the React Beautiful DND library to drag items(square divs) between columns or reordered in the same column. I followed their Egghead video tutorial to change the background color of the div as it's being dragged. When it gets dropped,…
dmikester1
  • 1,374
  • 11
  • 55
  • 113
1 2 3
…
21 22