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

Z-index issue on react beautiful dnd

I have list of draggable items, inside the list there is a drop down present. Whenever there are multiple draggable items present, drop down is going beyond the draggable item. This issue is not occurring before an item is dragged. This issue is not…
ajith kumar
  • 301
  • 1
  • 9
  • 20
0
votes
1 answer

How to add if and else condition or ternary operator for the functions

enter image description here Here the 2nd Inputbase should only be displayed if the type is card The Inputbase is the function of React-beautiful-dnd I have tried using normally the if and else and ternary but it isnt working
Gaurav
  • 1
  • 1
0
votes
1 answer

In React beautiful DnD Dragged element is floating over the entire page (position: fixed) and prevent all click events in page

Dragged element is floating over the entire page (position: fixed) and prevent all click events in page (im unable to drop the element i dragged for some reason). However when i worked in sandbox the page doesnt freeze or the dragged element donot…
NoushadM
  • 111
  • 3
  • 9
0
votes
0 answers

How to add a drag and drop property to mui table that has also expanded rows(like tree). How to do drag and drop only inside the same level items?

I want to create a draggable mui table with the help of the react-beautiful-dnd. But there is no examples with datas that are like tree. Only one level examples are there over the internet. Can you explain or give a sandbox code example? I tried to…
charounkara
  • 11
  • 2
0
votes
0 answers

reorder chips mui autocomplete and react dnd

Hi im trying to be able to reorder the chips inside mui autocomplete, I have encountered with react-beautiful-dnd but there is a problem when the chips are wrapped, is there any solution? or in the other hand I will like help for making the chips…
user19479975
  • 19
  • 5
0
votes
1 answer

is there a way to drag the events into the calender in react?

I am trying to create a dashboard with calender and task list. (https://i.stack.imgur.com/0HoGJ.png) this is the dashboard: import React, { useState } from 'react'; import { Calendar, momentLocalizer } from "react-big-calendar"; import moment from…
Soumaya Guenaguen
  • 11
  • 2
0
votes
1 answer

React App using react-beautiful-dnd ERROR "Unable to find any drag handles in the context '0' "

What is the promlem? PlayerList.tsx import React, { FC } from "react"; import players from "../../store/players"; import { observer } from "mobx-react-lite"; import { Draggable } from "react-beautiful-dnd"; import PlayerCard from…
luckyme-
  • 13
  • 2
0
votes
0 answers

want to apply conditions for dropping items

Applying the conditions but when applying two or more conditions its returning by default false in isDropDisabled if (e.name === "In Progress") { return ( true ) } Thank you in Advance
chetan
  • 1
0
votes
0 answers

wrap gridjs component in a DragDropContext using react-beautiful-dnd

I am not a react expert, and I am trying to integrate a gridjs component with react-beautiful-dnd library. The objective is to add drag and drop functionaly to a gridjs table. I have create a react component, that looks like this: import…
Nikolas
  • 1
0
votes
0 answers

react beautiful dnd horizontal scroll breaks item selection in dnd

when dragging an item inside container with horizontal scroll using react-beautiful-dnd, selection of item inside bugs and I can't select anything until I delete one item from the list code from component with DnD
ad0y3z
  • 13
  • 3
0
votes
0 answers

How to trigger droppable from outside droppable area?

I have a To do app (created using react-forked/dnd) with multiple columns to move tasks when status is updated. I wish to allow dropping task card even when it is dropped over the header area of the column (which is outside the droppable area of the…
M.S. Nikhil
  • 181
  • 11
0
votes
0 answers

Combining two items by Drag&Drop with React

I have a list of components and the list should have display:flex; flex-wrap: wrap; css properties. I don't want to let the user change the sorts of the list. So the items doesn't have to be sortable. What I want is combining two items by using…
Kerem İlhan
  • 53
  • 1
  • 6
0
votes
0 answers

Drag and drop Beautiful dnd

I'm building a web app with the drag and drop context but the issue is whenever the last element leaves one of the columns the particular column disappears I used beautiful dnd, I tried using separate card components, I tried using different…
jibola
  • 1
  • 1
0
votes
0 answers

Prevent dragging before vertical line React-beautiful-dnd

I want a little help from you. I'm stuck with a problem using react beautiful dnd library. I want to prevent dropping items before the red line and before the red line all items should not be draggable also. You can say kind of a timeline task. The…
Tanjil Hossain
  • 79
  • 1
  • 10
0
votes
1 answer

Is there any way to enable a content security policy without 'unsafe-inline' styles for react-beautiful-dnd?

I have the content security policy blues when trying to use React-beautiful-dnd. I keep on getting: Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self', etc... I have a MERN stack…
John Shanks
  • 165
  • 9
1 2 3
…
21 22