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

Drag and drop using react-dnd or react-beautiful-dnd

In React I am trying to create multiple tiles in my dashboard. Here is the sample frame. In the above picture, there are 5 rows and each rows have different columns. I was trying to implement the rearrangements of these tiles in both X and Y…
Saswat Arabinda
  • 407
  • 2
  • 6
  • 16
0
votes
0 answers

React Beautiful DND Multi-Drag is dragging all cards in the column to the next column even without checkbox selected on a card

We have customized the React beautiful DND drag and drop so that when users do multi drag, it is triggered by them selecting a multiselect in the top of that specific column. Once the users select the multiselect option in that column, checkboxes…
Uma Annamalai
  • 1
  • 1
0
votes
0 answers

DnD How to manage sub lists inside main list? using @react-beautiful-dnd

I have a list like that: const list = [ { key: 'parent1', text: 'parent 1', subList: [ {key: 'child1', text: 'Child 1'}, {key: 'child2', text: 'Child 2'} ] }, { key: 'parent2', text:…
ESI
  • 1,657
  • 8
  • 18
0
votes
0 answers

Dragging item within droppable in material drawer reflects droppable in page (behind/underneath drawer)

I have 2 droppables, one in page, and other one in MUI drawer. Expected behavior When re-arranging on drawer, it should not overlap droppable of page, rather re-arrange on drawer itself, even droppable behind it exists. Same should go for droppable…
Rizwan Ali
  • 113
  • 2
  • 12
0
votes
0 answers

React Beautiful DND nested drag and drop

I am creating a side navbar with react-beautiful-dnd. The navigation consists of pages and pagegroups, the pagegroups consists of more pages and pagegroups we can add pagegroups and pages in any hierarchy we want in this sidebar. Now I want to…
Syed Muhammad Moiz
  • 385
  • 2
  • 16
0
votes
0 answers

How to apply a width to each item that are aligned horizontally with react-beautiful-dnd?

I'm using react-beautiful-dnd library and trying to apply a width Here is demo import React, { useState, useCallback } from "react"; import ReactDOM from "react-dom"; import { DragDropContext, Droppable, Draggable } from…
Happy1234
  • 537
  • 3
  • 15
0
votes
0 answers

How can i create a custom handle nested in child component with react-beautiful-dnd?

I'm desperately trying to have a custom drag handle INSIDE of draggable children of a grid using react, typescript and react-beautiful-dnd. Any ideas on how i can achieve that? This is pretty much what the idea is This is my grid component code. I…
Franke
  • 13
  • 4
0
votes
0 answers

react-beautiful-dnd stop draggable from moving out of div

I am using a sample code to understand react-beautiful-dnd. Reference code is https://codesandbox.io/s/heuristic-cherry-8c1hhl How can I disallow Draggable to move out of a region? If you look at the picture it is being taken to the header section…
MAG
  • 2,841
  • 6
  • 27
  • 47
0
votes
1 answer

How to correctly restrict Droppable area in React Beautiful Drag and Drop?

I'm working on a task boards project. Everything worked ok until I restricted the board area (columns of tasks) to open additional window (a right sidebar for editing tasks). To do that, I just added width: calc(100vw - 672px); to the scrollable…
sswwqqaa
  • 1,545
  • 3
  • 15
  • 29
0
votes
0 answers

Dragging and Dropping in typescrip/ react

I'm making my first hobby project with the scoreboard of the Swedish first league in football. I want to make a function where the season could be predicted via a drag and drop component in typescript and react. But the drag and drop doesnt work as…
Sekas
  • 1
0
votes
0 answers

React beautiful-dnd droppable zone disappears on drop end

I'm trying to create two tables one from where you can copy some items and drag them in two relative sub categories in the second table. Bu everytime I drop anything the second droppable disappears. I think it down to line 233 and how i'm…
angeloandrea.isola
  • 13
  • 4
0
votes
0 answers

Remove placeholder space when dragging over

When dragging over the droppable area it adds a white blank space Is there anyway to customize this behaviour and remove the blank space ? There are solutions to add a custom placeholder like this But it doesnt remove the space that hasnt been…
Sachin Jadeja
  • 11
  • 3
0
votes
0 answers

Drag and drop in React-Beautiful-DnD sometimes fails to function

I developed a ticket management system using the React-beautiful-dnd lib, and each ticket has three statuses: pending, processing, and complete. All data is retrieved from the backend and cards are shown in the appropriate column. The issue I'm…
Komuthu Fernando
  • 1
0
votes
3 answers

React Beautiful Drag and Drop not work for me

Why this code not work form me. I can't understand. I try to learn react-beautiful-dnd. This is my code: Column.jsx import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; const Column = () => { const itemList = [ { id:…
MISIU
  • 19
  • 5
0
votes
0 answers

Using react-beautiful-dnd with local storage

I'm trying to figure out where in my code i need to put in local storage (localStorage.setItem() and localStorage.getItem()), so that when I'm finished moving elements around on each list, they stay where they are on page refresh. Here is my code. I…
Mr. C
  • 23
  • 3
1 2 3
…
21 22