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
0
votes
2 answers

UI Flickers when I drag and drop and item

I have a problem getting react-beautiful-dnd to work without flickering. I have followed the example in the egghead course. Here is my code sample. Item List Container onDragEnd = (result) => { if (this.droppedOutsideList(result) ||…
Chukwuma Zikora
  • 109
  • 1
  • 4
  • 10
0
votes
0 answers

render a component in React beautiful dnd

Hello to all I'm trying to learn react-beautiful-dnd, I follow all the official tutorial and tried to read the documentation but it's not so clear at all. But what if i want to render a complex data set ? Just to understand better my problem:…
Legeo
  • 784
  • 4
  • 20
  • 44
0
votes
1 answer

Remove Draggable from Parent while Maintaining Draggable Child in react-beautiful-dnd

I have columns with items in them. Currently, based on the code I copied from the react-beautiful-dnd, the columns and items are both draggable, and it's working well, but I don't want the columns to be draggable. If I remove the …
Luke Schlangen
  • 3,722
  • 4
  • 34
  • 69
0
votes
1 answer

DnD Between Components

Is there any way to drag and drop between components? I have two components exactly the same ( in terms of data structure and UI). One button on first component expands the second component and I want to drag and drop items among them. I believe it…
Ayberk Baytok
  • 79
  • 6
0
votes
1 answer

Component won't drop in adjacent column react-beautiful-dnd

I'm having difficulty with dropping a component into the next list area of my app. I can drag, drop and sort perfectly within the parent column but can't drop the component elsewhere. Here's the code in my onDragEnd function: onDragEnd = result =>…
kn0t
  • 303
  • 6
  • 13
0
votes
1 answer

opt out of "move out of the way" functionality?

I'm using react-beautiful-dnd for my project. I'm trying to make two draggables swap places (between droppables). Basically I only allow 1 draggable per droppable. Everything is working fine, except for one part. The feature "move out of the way"…
Johan Hjalmarsson
  • 3,433
  • 4
  • 39
  • 64
0
votes
0 answers

How to test the 'drag and drop' feature from the react-beautiful-dnd library using Selenium in Java?

I have tried various options, but have been unable to simulate a mouse click to drag an element from one position to another in a browser using Selenium. When the test runs, I see the element get selected, but it does not move to the specified drop…
toasty
  • 228
  • 2
  • 7
0
votes
1 answer

Draggables in react-beautiful-dnd don't dragging but only create a placeholder

My simple app to practise with react-beautiful-dnd fails to work as expected. The list items don't drag rather just create an adjacent placeholder. I read that margins on the draggable has unintended consequences but getting rid of the bootstrap…
Mwaniki Sam
  • 151
  • 1
  • 4
0
votes
1 answer

Is there a way to add a label to draggable and droppable items in react-dnd

I'm using react-beautiful-dnd to create draggable bars of text that I want to move from a right card to a left card. I want the draggable bars of text to appear under a label but the labels all get put together in a couple of lines. E.g. if i have…
user2731063
0
votes
1 answer

Modify Json to use into React beautiful Drag and drop

I am using this library for react drag and drop functionality. However, my json is in this format [ { "id": "5f7", "itemName": "ABC" }, { "id": "780", "itemName": "CRD" }, ] However, all the tutorial points, i will need…
Tanmay Parmar
  • 177
  • 1
  • 2
  • 14
-1
votes
1 answer

Why is react-beautiful-dnd not working correctly?

I am using the react-beautiful-dnd library to implement dragging components that are in the same Main component. The code is presented, please help me figure it out. The element is dragged, but does not stay in place, and the elements that are…
ant
  • 69
  • 7
-1
votes
2 answers

Inverted react-beautiful-dnd order

I have a working vertical column drag and drop React app using react-beautiful-dnd, but would like to 'invert' it so that Draggable items fall to the bottom of the Droppable div instead of floating to the top. Is this possible?
18nrankin
  • 1
  • 2
-2
votes
1 answer

Cannot read property 'lists' of undefined

I am trying to create a web application that mimics trello. I keep getting this error and im not sure how to fix it. The code works fine in another project but not when i try and add it to this new project. ALL dependencies are updated. I am running…
Kaylee Cabral
  • 1
-3
votes
1 answer

Drag And Drop List with Child/Parent functional

I need to create somethink like this using react-beautiful-dnd all list elements are draggable
Hayk Grigoryan
  • 11
  • 3
1 2 3
…
21
22