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

React Beautiful DND example without react-window

This is the example that I like, because of hooks. But I don't want use react-window package. Tried to remove it, ended up with no luck. How can I make this example minimalist like simple board example
test
  • 2,429
  • 15
  • 44
  • 81
0
votes
1 answer

Collision between React-beautiful-dnd and other Dragging package

I am trying to use D3 parallel parcoords and Material-table together in one app. Each component works well individual. but when those are render together an issue is occurred inside react-beautiful-dnd. D3 parallel parcoords uses d3-dragging package…
Dmytro Myronenko
  • 73
  • 1
  • 11
0
votes
1 answer

react-beautifull-dnd limit number of items

I am working on React and DND, I am experimenting with an example. For example, I have two columns between which I can drag-and-drop the cards back and forth that works fine, now I want the second column to contain no more than 4 items, but items…
Joppe Meijers
  • 301
  • 4
  • 24
0
votes
1 answer

Dragabbale won't move in react-beautiful-dnd

I'm trying to build a simple implementation of draggables in react-beautiful-dnd but apparently my draggables won't move. Here is my sample code in…
user458975
  • 25
  • 7
0
votes
0 answers

How to enable scrolling inside an `overflow: hidden` div

I've implemented a kanban board with react-beautiful-dnd. It works the way I want. I would like to be able to use this board inside a div container that has overflow: hidden. However, doing so prevents from dragging Cards in columns that are outside…
Greg Forel
  • 2,199
  • 6
  • 25
  • 46
0
votes
1 answer

Using react-Beautiful-dnd, how can you change draggable dimensions before the drag begins (onBeforeCapture)

This is the code I've found to retrieve the correct draggable element and edit it's dimensions, during the onBeforeCapture() responder. Changing dimensions during this responder is in accordance with the documentation. This seems to work in only…
Ariel Frischer
  • 1,406
  • 2
  • 12
  • 20
0
votes
1 answer

React dnd broad not working on the typescript

I tried to using this react dnd on the react typescript. sample not working on the type script project , any one know how to do that correctly on the react typescript import React, { Component } from 'react'; import ReactDOM from…
core114
  • 5,155
  • 16
  • 92
  • 189
0
votes
1 answer

react-beautiful-dnd throws error when ordering the second time

I have bean following the official tutorial for react-beautiful-dnd from egghead.io. On lesson 5 persisting the reordering my implementation throws all the time an error but only the second time when I try to reorder the top item. It works fine when…
Bogdan Oloeriu
  • 183
  • 2
  • 11
0
votes
1 answer

React Beautiful Drag and Drop

I'm creating a draggable list with Drag and Drop elements, the problem is that the animation of the DND element is shifted from the pointer, causing problems with the dragging to an other drag and drop…
Federico Leuze
  • 43
  • 1
  • 7
0
votes
1 answer

react-beautiful-dnd draggables dragging everything

I've recently been trying to build a trello-like application using react-beautiful dnd. I am able to get draggables to drag elements, but when I grab an element to drag, all the draggable elements drag with it. I've been going through…
mattcbodily
  • 1
0
votes
1 answer

React | Gatsby: Components inside or outside main page component

While learning how to use react-beautiful-dnd library, I've found that (when I'm building the library required structure) if I define components outside the main app, it works on React but it does not work on Gatsby (development), it starts to work…
GWorking
  • 4,011
  • 10
  • 49
  • 90
0
votes
1 answer

Draggable Item from component A to B

Is it possible to render the columns within different components and be able to drag items from B -> A and A -> B There will always be 1 column in Component A and 1+ in B. I'm not sure how I can go about doing this? Do I need two DragDropContext to…
Freddy.
  • 1,593
  • 2
  • 20
  • 32
0
votes
1 answer

React Beautiful dnd converting functional componentings

I'm trying to convert beautiful-dnd to functional components and split them into different components but I'm just wondering why this is throwing an error? Thanks,
Freddy.
  • 1,593
  • 2
  • 20
  • 32
0
votes
1 answer

Typescript: extending properties of div element fails on react ref

I am working on a Drag and Drop scenario with react-beautiful-dnd, trying to add a drop animation, following the manual https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md. Using typescript I am getting in…
o-faro
  • 789
  • 8
  • 16
0
votes
2 answers

Drag and Drop: Create columns dynamically when the element is dropped

I'm using react-beautiful-dnd to copy and element drop into a columns previously created. But I wonder if there is any possibility when I'm dragging an element and I drop it, it creates me the column dynamically to drop it ? could I make it ? if…
user3810167
1 2 3
…
21
22