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

TS8006: 'import type' declarations can only be used in TypeScript files

Building a React NextJS and rollup bumps into the following error: rollup.config.js: import json from '@rollup/plugin-json'; import typescript from '@rollup/plugin-typescript'; import ts from "rollup-plugin-ts"; import jsx from 'acorn-jsx'; import…
Kok How Teh
  • 3,298
  • 6
  • 47
  • 85
1
vote
0 answers

Why is react-beautiful-dnd draggable items all over the place on drag?

I am using react-beautiful-dnd and MUI with Next.js. Very simple example code however doesn't seem to be working. Instead it looks like this: What is wrong with my code here? Or, is it to do with some styling of MUI? Here's the list component…
mr0b0t0
  • 53
  • 8
1
vote
0 answers

React Beautiful DND draggable card position problem while drag

I facing a gap issue between the card and cursor. The cursor is not stick while dragging a card. Here I am attaching a screenshot that shows gap and also insert code. This is a column and it contains a scrollbar and the gap increase when scroll…
Kamlesh sharma
  • 163
  • 7
1
vote
1 answer

How to use react-beautiful-dnd with nested material-ui table

I want to use react-beautiful-dnd with nested material-ui table. I've looked online for several examples and made some mix between this https://codesandbox.io/s/qly3kkk8z4 and this…
Fallingsappy
  • 181
  • 3
  • 21
1
vote
0 answers

React react-beautiful-dnd having some glitches

My code is functional, but the draggables are glitchy. The idea is to be able to drag items from the horizontal bar into the grid below. Sometimes everything works fine. However, sometimes when you drag from the top, the draggables to the left jump…
Shawn
  • 11
  • 1
1
vote
0 answers

Is there a way to disable React-Beatiful-DND from outlining focused draggable items when I shift+click?

I built my own multi-selecting code to use with react-beautiful-dnd but I can't seem to disable the outline. It seems to be built into the draggable component. It only seems to happen when I shift + click on an item in the list.enter image…
David Haas
  • 11
  • 1
1
vote
0 answers

React-beautiful-dnd not working with react router

I am working on an app that looks like this: https://codesandbox.io/s/compassionate-benz-djyjq0?file=/src/App.tsx I have no idea why the DnD is not working. Also, the reason I included react-router is because in my local setup, it worked if I…
avkat
  • 101
  • 1
  • 8
1
vote
0 answers

react-beautiful-dnd inside react-draggable component dragging items problem

I have a draggable dialog component(dragging using react-draggable), inside the dialog I have a list with draggable list items (dragging using react-beautiful-dnd). The problem is when I'm starting dragging a list item it moves somewhere on the…
Ruslan Ermahgerd
  • 455
  • 1
  • 5
  • 14
1
vote
0 answers

React beautiful DND rerenders on drop

I am using react-beautiful-dnd to handle drag and drop operations in my application. I allow users to have youtube videos, and let them reorder them. I've extracted the logic to this codesandbox All code:…
Jake Lanning
  • 11
  • 2
1
vote
0 answers

Drag and drop reactJs using beautiful dnd

I am trying to practice #Drag and Drop FreeCodeCamp So I created a state which includes a number of boxes and inside these boxes, there should be an icon that I suppose to be able to move to any of the generated boxes so the problem with my code is…
Mahmoud Hlal
  • 114
  • 7
1
vote
0 answers

React DND not reodering items and lossing draggableId

Currently getting my head into React and DND for the first time. I have created a small example application where I try to implement a basic functionality of DND. I´m running into two issues: After I drop an item and reorder the state object (and…
el solo lobo
  • 973
  • 11
  • 23
1
vote
0 answers

react-beautiful-dnd: height doesnt fit to content

First of all i want to start of with the 2 files that matter most Board.js import { useRef, useState, useEffect, useCallback } from 'react' import { useDraggable } from 'react-use-draggable-scroll' import { sidebar } from 'react-admin' import { Box,…
Danilo Welvaadt
  • 23
  • 8
1
vote
0 answers

How to integrate React-Beautiful-DND and Ant Design table?

I am trying to integrate React-Beautiful-DND and Ant Design table, but I am facing an issue with rows as I drag them. Their style is changing and the whole table jumps. Anyone tried this before? How do I keep the style of dragged row as it was when…
Person
  • 2,190
  • 7
  • 30
  • 58
1
vote
1 answer

How to drag and drop multiple words in react dnd

How can I drag several words from a sentence by highlighting the selected words and being able to drag and drop from one text box to another using react-beautiful-dnd?
dude_blag
  • 135
  • 1
  • 4
  • 14
1
vote
1 answer

how to write an onDragEnd function to make dnd work

There is a Main component, which contains 4 components that need to move I understand that when the position changes, the index of the component should change I don't understand how to make the components stay in the places where they were moved (If…
ant
  • 69
  • 7
1 2 3
…
21 22