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

Closing/Opening Expansion Panel onDragStart/onDragEnd with React Beautiful DnD

I've successfully implemented Beautiful DnD in a React app where the draggable items are Material UI Expansion Panels. I have the list of items resorting onDragEnd and saving the new sorted list in state. I'm using React hooks, useState,…
miguelfeliciano
  • 73
  • 1
  • 6
1
vote
1 answer

Issue in React beautiful dnd with Material UI list

I am trying to build a rearrange-able material UI List with react beautiful dnd. Everything is working fine except for the ListItemSecondaryAction in the list. (i.e) When I drag a list item, the ListItemText and the ListItemIcon are draggable. The…
Shwetha Padmanabhan
  • 35
  • 6
1
vote
1 answer

Learning React Beautiful DnD basics without building Trello Clone

I want to learn React Beautiful Dnd by coding two div boxes that contain child elements I can drag between them. All (most?) tutorials online are Trello clones with loops and state that clutter my understanding of the basics. I want to simplify my…
William
  • 4,422
  • 17
  • 55
  • 108
1
vote
1 answer

List items not staying in place using react-beautiful-dnd

I'm using react-beautiful-dnd and copied the code from the tutorial to build a draggable list. It worked and looked like this: And here's the code that built this: https://github.com/DDavis1025/react-beautiful-dnd However now I'm trying to…
DDavis25
  • 1,149
  • 1
  • 13
  • 25
1
vote
0 answers

How to animate transformed component between rerender?

I am trying to animate my components after they are dropped into a new position. I use react-beautiful-dnd for drag and drop. sandbox example for this situation Here you can see, that when I drag one element from one list and drop to another list,…
Norayr Ghukasyan
  • 1,298
  • 1
  • 14
  • 28
1
vote
1 answer

Resize react-beautiful-dnd

Is it possible to adjust the height of the the droppable container? I tried inline styling but didn't yield expected results. My expectation is that the container that holds the draggable items…
Snoopy
  • 1,257
  • 2
  • 19
  • 32
1
vote
0 answers

Weird effect in react-beautiful-dnd with Antd Table

I'm using react beautiful dnd with Antd table to implement drag and drop feature. All are working fine but I'm having the following weird effect. This effect even happens when I drag the item and drop in its original place. Anyone who worked with…
bli07
  • 673
  • 1
  • 5
  • 16
1
vote
0 answers

React Drag and Drop in Grid System

I was trying to implement drag and drop for html grid system ( row and col arranged divisions) using react beautiful dnd. The code can be viewed here ( this is forked from here ) The changes i made is remove the type from droppable as I want…
jamsheer K
  • 49
  • 5
1
vote
4 answers

Trying to create a draggable table/list and it gives me error saying 'provided.innerRef has not been provided with a HTMLElement.'

I am trying to create a draggable list using Material UI and react-beautiful-dnd. I followed the tutorial on their page and created this- function DraggableList(props) { const { classes, tableHeaders, tasksList } = props; return (
…
Kimaya
  • 1,210
  • 4
  • 14
  • 33
1
vote
2 answers

Getting Error : find drag handle element inside of Draggable when adding isDragDisabled flag in draggable

When I set isDragDisabled to true (hard coded) I am getting an error like this index.js:1446 raw Error: Invariant failed: Cannot find drag handle element inside of Draggable. Please be sure to apply the {...provided.dragHandleProps}…
NIKHIL C M
  • 3,873
  • 2
  • 28
  • 35
1
vote
2 answers

Strange behavior when dragging items on the second drag react-beautiful-dnd

For some reason every second drag is not performing very well when using the react-beautiful-dnd package (see image) my onDragEnd function is looking like this: const onDragEnd = result => { if (!result.destination) { return; } …
Ronald Zwiers
  • 780
  • 2
  • 10
  • 25
1
vote
1 answer

Unable to drag and drop Components in same Droppable react-beautiful-dnd

What's happening is when I have multiple items in a column and attempt to drag one, only one is shown and according to the lessons found here I should be at the point where I can move items within the same column but can not. In React dev tools…
kn0t
  • 303
  • 6
  • 13
0
votes
0 answers

some draggable items are misplaced when using react-beautiful-dnd

I'm trying to use RBD for my task management app, After setting it up i noticed that sometimes when i drag and drop a task to a populated column, its inserted at another index that the one i was aiming for, for example if i place it at the top it…
Ahmed Mahmoud
  • 39
  • 2
  • 7
0
votes
1 answer

react-beautiful-dnd issue with multiple dynamic lists

i have 10 accordions with mapping over them. Each accordion have 10 items inside of it. items can be only moved inside of own accordion. my issue is my current code logic works fine with first accordion, but when i open second or another accordion…
Rana Faraz
  • 160
  • 12
0
votes
0 answers

React react-beautiful-dnd drop items to bottom

I have a drag-and-drop component and I want the items dropped in the box to appear on the bottom. Now, it goes all the way up, before getting into the wished position. My layout looks like this: When I drag "Answer 1" into the area where it sais…
S. Kok
  • 23
  • 6
1 2 3
…
21 22