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
3
votes
1 answer

React Beautiful DND not working, element is not draggable

I've been trying to implement my Reordering list inside my card using react-beautiful-dnd library but I tried everything in a similar way from egghead.io courses but could not get it working. Here's my code: import React, { Component } from…
Devansh_Geek
  • 131
  • 2
  • 10
3
votes
2 answers

React-beautiful-dnd: How to drag one element from a different DragDropContext to another DragDropContext

I want to move one element from a different DragDropContext to another: I have a: // sidebar.js console.log('sidebar end drag')}> {provided =>
I am L
  • 4,288
  • 6
  • 32
  • 49
3
votes
1 answer

How to implement drag and drop behaviour in React

I'm trying to implement drag and drop behaviour using React and react-beautiful-dnd library. I want to chose some images using react-dropzone library and after choosing images I show thumbnails on the right side of the screen and after that I want…
Boky
  • 11,554
  • 28
  • 93
  • 163
3
votes
3 answers

simple list in react beautiful dnd not working

I've been following the official course on egghead (https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd and sample working code: https://codesandbox.io/s/52p60qqlpp) and wrote this: https://codesandbox.io/s/00k3rwq3qn However,…
Saad
  • 26,316
  • 15
  • 48
  • 69
3
votes
1 answer

react-beautiful-dnd: Cannot find drag handle element inside of Draggable

I have a component that receives two sets of data and is a react-beautiful-dnd DragDropContext as below render() { let index = -1; const dataSetOne = this.props.store!.getdata(1); const dataSetTwo = this.props.store!.getData(2); …
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
2
votes
1 answer

react-beautiful-dnd draggable flickering (but only some of the draggables children)

I am having trouble getting react-beautiful-dnd to work because children of the draggable are flickering after reordering: No external requests happen in the background, the app stores the change only in the local state (see first code block…
felixmp
  • 307
  • 3
  • 16
2
votes
1 answer

How to work Drag-and-drop for nested array in useFieldArray

I am trying to implement the drag-n-drop feature on a nested array of inputs. I am using react-beautiful-dnd and react-hook-form libraries: useFieldArray hook to manage the form and useController hook for controlled input. The problem I am facing is…
miraj
  • 546
  • 3
  • 12
2
votes
2 answers

React props being mutated before setState called (react-beautiful-dnd)

I'm having a strange issue when implementing a drag-and-drop. The drag and drop has 2 levels, the Group and the Rank. The intention is that every "overall group" (buttons at the top) maintain their own ranks for both Groups and Ranks. So if I move…
Frank
  • 735
  • 1
  • 12
  • 33
2
votes
1 answer

How to implement auto scrolling when dragging items between columns for multiple containers in react-beautiful-dnd

I am building something like trello board that has dnd feature between columns and items inside the column. I want to build auto-scrolling when dragging the item to the end of parent container. But I am getting warning whenever dragging items It…
Acode
  • 507
  • 5
  • 14
2
votes
1 answer

Unable to find draggable with id: b7zc6

Hi i am new to react and stuck with react-beautiful-dnd issue. I Seem to have configured as per the documentation but still facing this weird issue related to draggable id. made draggableid as string provided index as number assigned innerref…
Vidya Patil
  • 21
  • 2
2
votes
1 answer

Mui TabList with react-beautiful-dnd not auto scrolling on drag

I have added drag & drop feature to the MUI Tabs List using react-beautiful-dnd. Code - import * as React from 'react'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from…
qwertyvipul
  • 29
  • 1
  • 7
2
votes
1 answer

React beautiful drag and drop doesn't work with Material UI component

I've tried to make a horizontal list of MUI buttons draggable with react beautiful drag and drop. But it doesn't seem to be working. I wrapped up my buttons with , ,and tags. Here's the…
nitsir
  • 65
  • 1
  • 7
2
votes
1 answer

react-beautiful-dnd doesn’t work properly with react-virtualized Table component

Expected behaviour Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation. Actual behaviour Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item…
Abhishek
  • 1,302
  • 10
  • 18
2
votes
0 answers

How to achieve horizontal sorting with react-beautiful-dnd on multiple lines and without horizontal scroll?

I need to have all sortable elements listed on multiple lines and without horizontal scroll. Look at this sandbox: https://codesandbox.io/s/react-beautiful-dnd-horizontal-list-forked-smn1s?file=/index.js Currently it is not achievable neither…
Vlado
  • 3,517
  • 2
  • 26
  • 24
2
votes
1 answer

Is there a way to implement drag and drop in a grid, using react beautiful dnd?

this is my first question here. As the title says, i'd like to know if is there a way to create a dnd grid using react beautiful-dnd library. I've already found out that the library supports vertical and horizontal dnd, and i've already tried both,…
Gahrz90
  • 67
  • 1
  • 8
1 2 3
…
21 22