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
4
votes
0 answers

Jest is using the wrong version of core-js when testing react-beautiful-dnd

Jest is using the wrong version of core-js when building components that import from react-beautiful-dnd. However, at runtime, there is no problem and our pages build successfully. We are building a kanban board using react-beautiful-dnd. At…
Tim Millar
  • 41
  • 4
3
votes
1 answer

React beautiful DND: Detected non-consecutive indexes - Error when re-reodering

Using https://www.npmjs.com/package/react-beautiful-dnd after reordering some element for the first time, reordering of the previously moved item is not possible and the console prints Unable to find draggable with id: XXX Also, when dragging…
Juanma Menendez
  • 17,253
  • 7
  • 59
  • 56
3
votes
0 answers

Drag and Drop to wrapped flex items using react

I have to create a drag and drop functionalities to some dynamically created list items just like the image below: Here the, items will be displayed by using flex and items will be wrapped by flex-wrap: wrap so that it adjust the items into multi…
ninja
  • 167
  • 2
  • 12
3
votes
3 answers

React Beautiful DnD delay when dropping

I am using react-beautiful-dnd. I have it working, except when I drag and drag an item into one of my lists, the item is positioned incorrrectly, has a short delay, then jumps to the correct position. Here is what it looks like: Link to issue As you…
Brad Bieselin
  • 107
  • 1
  • 11
3
votes
0 answers

Clicks only work on the center of elements, what's happening?

I'm using React-Beatiful-DnD, as shown in the attached GIF, clicks only work on the center of the elements. I want clicks to also work on the edges of elements... In this case, what keywords should I search for to solve the problem? My code is as…
Sungho Yahng
  • 101
  • 1
  • 9
3
votes
0 answers

React Beautiful DnD, multiple columns inside single droppable

I am trying to have a grid column layout, (2 columns) inside a single droppable container. The project is for an online menu where you can create a menu item, which goes into a droppable container, then you can drag that onto the menu that will be…
coldharbour
  • 45
  • 7
3
votes
1 answer

How to make input draggable in beautiful dnd with react

I making list of Draggable items, im using React.js with react-beautiful-dnd I created the list but the problem that, it have input fields. I want that the fields also be draggable, i cant achieve this how many times I not tried, and how much I…
Arseniy Klokad
  • 31
  • 4
3
votes
0 answers

React beautiful DnD- Nested list, but no need to drag between parent lists

I am currently trying to use React Beautiful DnD to create a draggable list of container objects. Within these objects, I have also built a sub-list of draggable elements. I know the library technically doesn't support nested lists, but I have seen…
tprebenda
  • 389
  • 1
  • 6
  • 17
3
votes
1 answer

How to handle backend data for react-beautiful-dnd

I have been working on a drag and drop planning feature, and I am attempting to pull saved data from my backend. I have been able to successfully log the needed data, however, when I am passing it into the react-beautiful-DnD template I have been…
David Dallen
  • 31
  • 1
3
votes
0 answers

How to save the updated stae values back to database(mongo db) in react-dnd

I am a beginner in learning react.js. I have developed a simple todo app using react-dnd. I was able to implement react onDragEnd function where the cards in each column are able to be dragged and dropped within and between columns. However, once I…
Fernando99
  • 43
  • 4
3
votes
0 answers

Type '(event: DragEvent) => void' is not assignable to type '(event: DragEvent) => void'

I've been using react-beautiful-dnd for a while in my project, but recently I'm getting this following error Type '{ children: string; className: string; style: { whiteSpace: "nowrap"; textOverflow: string; width: string; }; } | { children: string;…
Shamim Fahad
  • 132
  • 2
  • 12
3
votes
0 answers

react-beautiful-dnd test cases using @testing-library/react library

I am trying to write a test case for dragging a node from one list & drop it to another list. After dragging end, the onDragEnd function will receive a result of source & destination. Right now i am getting, destination null & reason CANCEL.…
MTA
  • 1,033
  • 5
  • 16
  • 37
3
votes
0 answers

react-beautiful-dnd nested list drag to parent

I'm creating a sortable tree view with 'react-beautiful-dnd' (because react-sortable-tree is broken with react@17+) the storybook in doc site has implemented a nested…
Littlee
  • 3,791
  • 6
  • 29
  • 61
3
votes
4 answers

React-beautiful-dnd returning destination=null

I am using the react-beautiful-dnd but whenever I am moving the item it's returning back. I think its returning back because I am receiving destination: null I do not know why this is happing. Why I'm getting destination always…
Anuresh Verma
  • 818
  • 1
  • 13
  • 30
3
votes
1 answer

react-beautiful-dnd How to styling for dragging item when outside the Droppable

I want to customize the style of dragging item when I drag it outside of the Dragale component. Currently: I want to change cursor CSS to "all-scroll" but it just affects inside the Dragale component. It doesn't affect when outside the Dragale…
Darius
  • 31
  • 1
  • 3
1 2
3
…
21 22