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

antd List with react-beautiful-dnd not working smooth

I'm using antd's list, and I need it to be rearrangeable. To achieve that, I have implemented react-beautiful-dnd, which is working well. However, I'm facing an issue where my page shrinks and expands while dragging and dropping. Could you please…
Nandha
  • 37
  • 5
1
vote
0 answers

function to order group positions with react-beautiful-dnd DragDropContext

In my code there is a list of groups (which are accordions), this list can be ordered with Drag and Drop. However, to save this information in the database, I need to perform calculations with a 'pos' property I created a code to get the onDragEnd…
Igor Leonir
  • 11
  • 2
1
vote
1 answer

text selection on double click doesn't work in react

I am using the react beautiful-dnd library for drag and drop. My issue is I have a text. I want my text to highlight when I double click on it. This is default behavior but when I use beautiful-dnd library and wrap my text with library code then I…
Rana Faraz
  • 160
  • 12
1
vote
0 answers

react-beautiful-dnd dragging width not working

Dragging element's width doesn't change and pushes elements in droppable element, flex: 1, to elements in droppable element; to occupy a given homogeneous volume.
Alisher Orolov
  • 31
  • 3
1
vote
0 answers

react-beautiful-dnd: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

This problem has been plaguing me for quite some time. Whenever I navigate away from a page that uses the react-beautiful-dnd package, this error throws, in both development and production environments. Full error: Error in function remove in…
fullStackChris
  • 1,300
  • 1
  • 12
  • 24
1
vote
1 answer

React-beautiful-dnd doesn't work with overflow auto

I'm creating an app like "Trello", and I'm getting into some issues. I created the "Board", the "Cards" and the "Tasks". Each card have a width of 300px. If I'm creating more cards than the website be able to display, it will go offscreen (and and…
blaize
  • 69
  • 6
1
vote
0 answers

react-flow-renderer and react-beautiful-dnd: zoom issue that occurs when the zoom level is less than 100%

"I am using React Flow Renderer and React Beautiful Dnd to drag elements. When I drag an element, it is directly under the mouse cursor when the zoom level is 100%. However, when I decrease the zoom level below 100%, there is a distance between the…
Uzaq Sahillərdə
  • 123
  • 6
1
vote
0 answers

React beautiful DND with typescript react-beautiful-dndUnable to find draggable with id: 1

I am trying to make my list of stuff draggable, because it will be used to reorder a set of items retrieved from an API. All these items will have a prop named number, and with the drag and drop, I should change the order and the number in the…
Matteo Possamai
  • 455
  • 1
  • 10
  • 23
1
vote
1 answer

dragging category with dragging items

Continuing the question I have a simple react project stackblitz (update) with react-beautiful-dnd. const onDragEnd = async (result) => { const { source, destination } = result; if (!destination) { return; } if…
SVE
  • 1,555
  • 4
  • 30
  • 57
1
vote
1 answer

react-beautiful-dnd move an item from one list to another

I have a simple react project stackblitz with react-beautiful-dnd. {(provided) => (
…
SVE
  • 1,555
  • 4
  • 30
  • 57
1
vote
1 answer

Disable Scroll When Dragging in MUI Grid

I'm currently writing an app where I have many columns in a MUI Grid, scrolling horizontally. It's a task planner app, and when I create a task, I want to be able to drag it between the different columns that are visible on the screen. I'm using…
spectraldoy
  • 31
  • 1
  • 5
1
vote
1 answer

react-beautiful-dnd - weird styles appear when dragging and element

Using the react-beautiful-dnd library, While dragging an element (before dropping it) a weird black point appears on my column. eg:
Juanma Menendez
  • 17,253
  • 7
  • 59
  • 56
1
vote
0 answers

react-beautiful-dnd: State change causes weird behavior after drag end

I have this table component where I'd like to be able to rearrange the rows of the table by dragging. I've managed to do that using react beautiful dnd the only issue is that some strange behavior happens after the drag ends (caused by state…
Zidane Hammouda
  • 11
  • 2
1
vote
1 answer

react-beautiful-dnd not draggable on next.js

I'm trying to make a web app using Next JS 12.3.1 with draggable components using react-beautiful-dnd version 13.1.1. For now, I'm just trying to get a single vertical list of draggable components to work import React, { useState } from…
Gabriel
  • 13
  • 3
1
vote
0 answers

Issue with NextJS: Invariant failed: provided.innerRef has not been provided with a HTMLElement

Issue with React Frameworks? I am using latest version of React & NextJS. I tried to debug my code a lot by reading through your actual guide and stack overflow. I was trying to test out the feature in plain vanilla React first where the vertical…
Rishabh Mehta
  • 11
  • 2
1 2 3
…
21 22