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

how to fix multiple codes which throws one error?

i've created react app multiple times downloaded react-beautiful-dnd wrote code: ` import React from 'react'; import './App.css'; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; function App() { return (
ogius
  • 1
  • 1
0
votes
0 answers

React beautiful dnd multi select with typescript problem

I'm having a problem with react beautiful dnd. I have made parent-to-child moving items as well as moving parents vertically but one more feature I need is to select multiple child items by pressing the shift button and clicking on the item also…
Tanjil Hossain
  • 79
  • 1
  • 10
0
votes
1 answer

React beautiful dnd hold item but not remove from the list

I am using react beautiful dnd. I have two lists I have to drag from list A to list B but don't want to remove(whatever the animated effect it is) from list A when I hold & drag the item. I want it to be visible on the list A as it is. How can I do…
Profer
  • 553
  • 8
  • 40
  • 81
0
votes
0 answers

Clip drag item content on drag start - react-beatiful-dnd

I'm currently working on an application where I need to use drag and drop functionality to reorder a list of forms. The problem appears when I'm trying to clip the form content and transform all other forms in smaller blocks for reorder state. I've…
cikpak
  • 125
  • 2
  • 7
0
votes
0 answers

the drag and drop feature doesnt work like it supposed to

I havent used react this deeply before and i am onfused on what to be done i am not able to figure out why the drag and drop feature is not working as it should please help , i was doing a follow along tutorial and this is exactly what he did and…
PANNAG KUMAAR
  • 3
  • 2
0
votes
0 answers

Testing a component that uses React Beautiful DnD

I am trying to write test for a component that uses react-beautiful-dnd with React Testing Library and Jest. Getting this error: TypeError: Cannot read properties of undefined (reading 'droppable') Component looks like this import {useEffect,…
reemwn
  • 17
  • 1
0
votes
1 answer

React DnD draggable ListItem won't stay inline

I'm trying to make ListItems inside a List draggable without changing too much structure, it seems to work but the styling is very off: The icons and its names should be on one line but for some reason the keeps being shoved into the…
Pompompurin
  • 165
  • 3
  • 14
0
votes
0 answers

Making first element of DnD Beautiful non draggable nor droppable

here here codesandbox Make This Stable at first Position (No Move Nor Drop) Fist element of first column should not move, must stick at first position only, no drag nor drop, first element should not be movable nor droppable, it should stick at…
Ashish Kamble
  • 2,555
  • 3
  • 21
  • 29
0
votes
0 answers

Extra Space is occupied when using react-beautiful-dnd with re-sizable

https://codesandbox.io/s/frosty-greider-04e0gb?file=/src/App.js I am trying to implement a component which is resizable and draggable at the same time. When I used react-beautiful-dnd for dragging and re-resizable for reliable div, I am getting some…
Himanshu Singh
  • 1,803
  • 3
  • 16
0
votes
0 answers

react-beautiful-dnd: how to cancel drags dynamically while dragging

I have several vertical lists and would like to prevent dragging to certain positions within one list. Is there a way to prevent items to be dropped in certain positions (for example disallow moving in the same column) in one of the responders of…
doberkofler
  • 9,511
  • 18
  • 74
  • 126
0
votes
0 answers

keep table styling static while dragging table header element (beautiful-dnd)

I'm very new to react draggable and beaitiful-dnd, I want to be able to drag my table headers around, which I managed! But the styling "pops out" while an item is selected like so: the item that is being dragged it seems to change the size of the…
Pompompurin
  • 165
  • 3
  • 14
0
votes
0 answers

React-beautiful-dnd: lazy loaded component keeps falling back to suspense when dragged

I have a react component that dynamically loads a widget component using react lazy, with the component path passed as a prop. It renders fine, but when I drag it, the component flickers between its Suspense fallback and the fully rendered…
James Hunter
  • 13
  • 3
0
votes
0 answers

Disclosure Panel closes when component re-renders

I am creating a nested sortable list in react using the dnd package. Each item inside the draggable contains input fields wrapped inside the Disclosure component from @headlessui. I am updating the item value with onChange on each input field. The…
Surya Khanal
  • 1
  • 1
0
votes
0 answers

How we can add combine with feature in react-beautiful-dnd without re-ordering the items?

I am new to react-beautiful-dnd libary , We are implementing the combine with feature in our project , Suppose we have files and folders in the list , and we want when we drag files over the folders and combine them , We get that functionality , but…
jashan singh
  • 29
  • 3
0
votes
1 answer

React beautiful dnd auto scroll x when i dragging into columns

I have columns with a defined width and a container of a certain size that is covered by overflow-x. When I try to drag to the last column it doesn't automatically scroll horizontally. I leave the styles and components When I delete the overflow…
Agustin R
  • 47
  • 6
1 2 3
…
21 22