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

How to save data from multiple columns react beautiful DnD

I'm building an application for managing orders from an e-commerce store using React-Beautiful-DnD. I'm trying to save the data from my columns to the database in order to save the position and the specific column it was in even after closing the…
Nadav Yair
  • 73
  • 10
2
votes
0 answers

Invariant failed: Cannot find droppable entry with id [droppable]

Working with react table and requirement is to make the rows draggable. Below is the short view of my code. {(provided) => ( …
Mayur Saner
  • 444
  • 5
  • 10
2
votes
0 answers

react-beautiful-dnd re-loads iframe within draggable, is there a way to stop this?

I am using react-beautiful-dnd to drag and drop different parts of my application. Some parts however use an iframe with a third party application widget in. When I drag these they re-render the entire iframe which I don't want to happen, is there a…
user3284707
  • 3,033
  • 3
  • 35
  • 69
2
votes
0 answers

react-beautiful-dnd: How can I make a specific droppable column scrollable instead of scrolling the entire context?

The current context looks like this: There are a lot of items in the last column, and all columns are elongated and you need to scroll the entire webpage down to see the rest of the items in that last column. What I want to achieve is: The…
Kid_Learning_C
  • 2,605
  • 4
  • 39
  • 71
2
votes
1 answer

Reactjs drag and drop

Is there a plugin to achieve drag and drop like this in reactjs? I tried with react-rnd and react-beautiful-dnd.
Rahul CS
  • 61
  • 3
2
votes
0 answers

Reordered array not getting displayed in the web - react-beautiful-dnd

I have developed a simple todo app using react-beautiful-dnd. I am able to retrieve data from the database and display it in the list. However, when I try to drag and rearrange the order, the reordered array is getting printed in the console (I…
Nikita Fernando
  • 79
  • 4
2
votes
2 answers

Function components cannot be given refs with React Beautiful DND

I am trying to use React Beautiful DND library to drag and drop lists in a todo application but I keep getting these three errors in my console. Error 1: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean…
Idris
  • 558
  • 7
  • 29
2
votes
0 answers

React-beautiful-dnd unexpected token error in package file

I was trying to compile a react program, which includes react-beautiful-dnd. However, I got the following error: SyntaxError: (path)\node_modules\react-beautiful-dnd\src\state\auto-scroller\can-scroll.js: Unexpected token, expected "," (2:14) 1 |…
Merlin
  • 31
  • 3
2
votes
2 answers

ClickAwayListener component not working with DragDropContext

I made a dropdown using Button and a Popper using Material UI components where you can click on the button and get a list of subjects to choose from. To make the popper disappear either we can click on the button again or use a …
Sitesh Roy
  • 387
  • 4
  • 8
2
votes
1 answer

React-DnD: Using IsDropDisabled to disable dropping wrong element type

I've been trying to find an answer to this for a while now and the library, while being very nice and well done... lack very much in clear documentation. I'm hoping to partipate in improving it once I get a clear understanding of it. Here's what I'm…
Johnny Prescott
  • 263
  • 6
  • 23
2
votes
3 answers

Cannot get React-Beautiful-DND and React-Virtualized to work together

Guys I've been trying to get this to work for actually a couple days and I haven't been able to figure this out. I can get both libraries to work individually but I'm stuck on why it won't work when I combine the two. I think I'm connecting them…
user1189352
  • 3,628
  • 12
  • 50
  • 90
2
votes
1 answer

react-beautiful-dnd and mysql state management

okay. I'm confused as to the best way to do this: the following pieces are in play: a node js server, a client-side react(with redux), a MYSql DB. in the client app I have lists (many but for this issue, assume one), that I want to be able to…
altruios
  • 986
  • 1
  • 10
  • 29
2
votes
2 answers

React-Beautiful-Dnd doesn't rerender after inserting new Draggable

I'm having some problems using the React-Beautiful-Dnd library for creating a Drag and Drop system on my webapp. I followed the tutorial and it all went well, but I'm trying now to use it in my app where I need to be able to add and remove Draggable…
Fsanna
  • 347
  • 1
  • 4
  • 11
2
votes
0 answers

Getting error was caught where a drag was occuring with react-beautiful-dnd

Im using react-beautiful-dnd 13.0.0, And I've implemented the onDragEnd functionalities, it was working fine but now I'm facing this issue when dragging a card to another table (it works fine in its own table) it stops and shows that error…
Onetik Dz
  • 31
  • 2
2
votes
0 answers

Unable to drag React bootstrap tabs - React Beautiful dnd

I would like to drag drop tabs from react-bootstrap and I am using react-beautiful-dnd to achieve it. But for some reason, I am not able to get it. No tabs are appearing. Here is my code: import React from "react"; import { Tabs, Tab } from…
arunmmanoharan
  • 2,535
  • 2
  • 29
  • 60
1 2 3
…
21 22