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

React Beautiful DND: Dragged Items Moving Automatically and "invariant failed: draggable[id: vacation.jpg]: requires an integer index prop" Error

I'm implementing a drag-and-drop feature using React Beautiful DND for managing files and folders from a cloud storage via a Node.js backend. Each item (file or folder) is represented by a separate React component. However, I'm encountering an issue…
Mohamed Rifkan
  • 7
  • 2
0
votes
0 answers

install lib again after imported file from github

After I imported the code from github and run npm run dev to show website, the error below occur. So, I must reinstalled three libraries react-beautiful-dnd, react-modal, react-datepicker to make the website work. Error: The following dependencies…
ft fwd2004
  • 1
0
votes
1 answer

Drag and Drop not working properly - elements stick and reordering is inaccurate

To start, for this project I use react-beautiful-dnd, Chakra UI, and Next.js. This is the link to the video that displays the problem: https://youtu.be/8maSmqahjfw. I've tried doing ondragupdate, ondragstart, and ondragend, various reordering and it…
Benjamin Sloutsky
  • 163
  • 1
  • 11
0
votes
0 answers

Drag and drop not working on react-beautiful-dnd

I have used drag and drop using react-beautiful-dnd but the drag is not working. This is my drag function const handleDragEnd = (result) => { if (!result.destination) return; // Return if the item was dropped outside of a droppable area const {…
Sai Krishna
  • 21
  • 1
0
votes
0 answers

react-beautiful-dnd - appending index to label

I have the following code: {(provided) => (
…
Paul VI
  • 515
  • 1
  • 8
  • 25
0
votes
0 answers

Drag and drop list using react-beautiful-dnd

I have a component and i have used react-beautiful-dnd for dragging but the drag is not working and it throws a console message when we are trying to drag "Unable to find draggable with id: project2" this changes if we drag with project 1, project 3…
Sai Krishna
  • 21
  • 1
0
votes
0 answers

I can't add default div styling using React beautiful Dnd

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; export default class Dashboard extends PureComponent { state = { alarmSubsections: ["AlarmNotification", "Overspeed", "HighTemperature", "Voltage"], …
Muhammad Attique Anwar
  • 1
0
votes
0 answers

react-dnd allow drag only from the blank space

Here's a sample code for the draggable block : {(provided, snapshot) => (
sandeep.kgp
  • 847
  • 2
  • 10
0
votes
0 answers

The react-beautiful-dnd doesn't work in initial render in a Kanban board

I've successfully added a Kanban board to my Next.js and TypeScript project. However, I encountered a minor issue during the initial render and when I refreshed the page drag and drop feature doesn't work but when I removed the
…
Amin Azimi
  • 659
  • 9
  • 25
0
votes
0 answers

Problem with drag and drop in react-beautiful-dnd, it only recognizes the top row as Droppable when line breaks

When flex wrap is enabled, the droppable doesn't recognize that a new line has appeared, and I can only drop the item on the line above. Does anyone know if it's possible to achieve this with this library? I would like it to have the normal behavior…
Eduardo Santos
  • 3
  • 2
0
votes
2 answers

React Beautiful DND- Uncaught RbdInvariant {message: 'Invariant failed: Could not find required context'}

I have a component in React that uses react-beautiful-dnd. This component renders a list of items that can be dragged. Here is the code for this component- const LeftPanelForTables = (props: LeftPanelForTablesProps) => { const { items } =…
Abhinandan Kushwaha
  • 299
  • 2
  • 9
0
votes
0 answers

NEXTJS13.4.4 - Cannot find draggable entry with id [1] & data-rbd-draggable-context-id` didnot match. Server: "1"Client: "0"' with react-beautiful-dnd

How can I fix an issue in Next.js? "use client" import React, { useState, useEffect } from "react" import { useFinalDataFromForm } from "@/store/useEventAddingData" import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd" import {…
Shri
  • 26
  • 4
0
votes
0 answers

React beautiful DND wait for state change before dragging

I'm trying to create a project that mimics monday.com (inspiration) and I'm using react beautiful DND to make all the drag and drop. What happens is, whenever I drag a group (Draggable) I also change a state, which "collapses" all groups, and…
Ido Kadosh
  • 81
  • 8
0
votes
0 answers

How fix this error Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "7" Client: "0"

My Code: Server side works fine. Error terminal image Error terminal image There are error messages here. I tried many variants but could not find a solution. I need creative solutions. Sometimes when I look at the code too much, I can't see the…
Ekrem Günden
  • 1
0
votes
0 answers

React js { DragDropContext, Droppable, Draggable } getting error

Invariant failed: Cannot find droppable entry with id [droppable-list] {(provided) => ( …
Leandro Sampaio
  • 1
1 2 3
…
21 22