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

How can I get combining from react beautiful dnd to work on my items?

I am using react beautiful dnd and have created 3 columns with list-items. I want to add the feature to combine items. I have read the documentation, but still can't seem to figure out why it's not working. The problem seems to be in onDragEnd,…
DCCW
  • 195
  • 3
  • 12
2
votes
0 answers

React hooks - adding exhaustive dependecies to useCallback/useEffect causes infinite loop

This has been answered here and here however I am still having the same problem after following the solution. Building an app using react-beautiful-dnd. showMap is a boolean which gets passed from a parent component when a button is clicked. All…
asus
  • 1,427
  • 3
  • 25
  • 59
2
votes
1 answer

react-beautiful-dnd with horizontal and vertical directions combined

I searched everywhere but couldn't find the right answer. Maybe I'm not good enough at operating Search Engines ️. Can react-beautiful-dnd combine both horizontal and vertical directions? Like what react-sortable-hoc can easily do with axis="xy".
SnekNOTSnake
  • 1,157
  • 12
  • 24
2
votes
2 answers

How do I maintain proper spacing after my element is dropped using react-beautiful-dnd?

I'm using Material UI with react-beautiful-dnd to create a pretty simple Grid column layout with elements that can be reordered. However, I'm having this jank issue with the spacing between the elements that's hard to explain, so I'll just show you…
naiveai
  • 590
  • 2
  • 14
  • 42
2
votes
1 answer

Setup problem encountered by wrapping a React-Beautiful-DND + React-Window virtual list with AutoSizer

When wrapping my virtual list component (react-beautiful-dnd + react-window) with an component (react-virtualized-auto-sizer) I'm receiving the following error: react-beautiful-dnd A setup problem was…
Chunky Chunk
  • 16,553
  • 15
  • 84
  • 162
2
votes
0 answers

onDragEnd event is not firing in react beautiful dnd

Below is my code, onDragEnd event is not firing {(dropProvided: any, snapshot: any) => (
user12919553
2
votes
0 answers

(React) Button click not working with Beautiful DnD

I'm using Beautiful-DnD for a project where if certain items are dragged and dropped into different columns, with a button click, it will reroute the user to a different page. I am having trouble where the button does not execute it's onClick…
Matt B.
  • 331
  • 3
  • 12
2
votes
0 answers

How to cleanup "react-beautiful-dnd" Draggable after removal?

I'm using this awesome react-beautiful-dnd library to let users reorder a list of items by "drag and drop". It works just fine. The only problem I've encountered is about when a user removes one of the items in the list. It seems that the…
HsnVahedi
  • 1,271
  • 3
  • 13
  • 34
2
votes
1 answer

Resizing a material ui card component by click and dragging a corner

I have a list of material ui cards that are in a react-beautiful-dnd list. I want to be able to move cards from one list to another and reorganize them (this is already done). I also want to be able to click, for example, the lower right corner of a…
Davenporten
  • 323
  • 2
  • 13
2
votes
1 answer

How to prevent conflicting events (I think) in React?

I'm using react-beautiful-dnd: {(provided, snapshot) => (
Zach Smith
  • 8,458
  • 13
  • 59
  • 133
2
votes
1 answer

Drag n drop with virtual lists and different size items

I'm trying to implement a Trello with virtual lists and different sized items, using react-beautiful-dnd and react-virtuoso (virtual lists with automated calculation of item sizes). react-virtuoso is not part of the examples of beautiful-react-dnd,…
Greg Forel
  • 2,199
  • 6
  • 25
  • 46
2
votes
1 answer

Flash happening using React-beautiful-dnd and Cloud Firestore

I am developing a react-application that uses Firebase(Cloud Firestore), Redux and React-beautiful-DnD. Here is gif image Whenever I move ToDo-Task to another column, a flash happening. I assume the reasons are for calling multiple requests to Cloud…
Taichi Tsujioka
  • 21
  • 4
2
votes
0 answers

isDraggingOver when isDropDisabled react-beautiful-dnd

The same question on Github - https://github.com/atlassian/react-beautiful-dnd/issues/1712 Question: Is it possible to handle isDraggingOver when isDropDisabled is true? I want to highlight the list with red border when it's closed. Codesandbox -…
Arthur
  • 3,056
  • 7
  • 31
  • 61
1
vote
1 answer

Drag and Drop - Save ordering to array field

I am using React Beautiful Dnd for reordering items. This is all working well, but as part of my onDragEnd I am using the following: function onDragEnd(result) { const newItems = [...customgearUpdate]; const [removed] =…
Paul VI
  • 515
  • 1
  • 8
  • 25
1
vote
0 answers

react-beautiful-dnd: overflow breaking Droppable

I am using react-beautiful-dnd to create draggable divs inside a container. It works really well as you can see in the GIF below, however because it is inside a scrollable container (.draggableContainer), after scrolling down, the drag starts from…
sfhasfasf
  • 55
  • 5
1 2 3
…
21 22