Stack Overflow
Stack Overflow

Questions tagged [react-dnd]

React DnD is a set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.

425 questions
3
votes
0 answers

Get backend instance from react-dnd

I'm attempting to use react-dnd and react-big-calendar with drag-n-drop support (using react-dnd under the hood as well) in an app together. However, if I initiate them separately, I get an error: Uncaught Error: Cannot have two HTML5 backends at…
artooras
  • 6,315
  • 9
  • 45
  • 78
3
votes
0 answers

Building drag and drop components "recursively" using React and react dnd

I tried using the react dnd and want to get it working on a recursively built component. But I am stuck and the drag is being attached to the last child component alone, making all the other components as draggable:"false". Below is a code sample…
Ravalika G
  • 31
  • 6
3
votes
1 answer

How to install touch backend if user is using a mobile?

I want to use the React DnD library and I want to support desktop and mobile. How can I switch the back end to HTML 5 or Touch at runtime?
Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
3
votes
0 answers

React DnD. How to pass itemTypes to DragSource/DropTarget which depend on container props?

Points to consider: The example is made up but illustrates the problem. In actual application global storage is used and action changing is being emitted inside hover() method of itemTarget. Here, to imitate global storage, window object is…
olegzhermal
  • 799
  • 10
  • 26
3
votes
0 answers

react-dnd not detecting hover and drop events

I'm having trouble getting react-dnd to to work. Specifically, while I can confirm dragging is being detected properly, my droppable targets are not detecting hover or drop events. I've been following the example at…
reggie3
  • 1,018
  • 2
  • 15
  • 22
3
votes
1 answer

react-dnd: drag out a line

I am building a component that allows the user to build a graph with drag-n-drop. There is a node well where they can drag out new nodes, they can drag the nodes around the canvas, etc. Now, I need to allow them to create edges by dragging from one…
masonk
  • 9,176
  • 2
  • 47
  • 58
3
votes
1 answer

React DND, Failed PropType

I'm stuck on how when I go to drag my component, my console is telling me that I've failed to declear the propType inside my render function, when it's declared as const { connectDragSource, isDraggin } = this.props;. I've noticed if I remove the is…
Justin E. Samuels
  • 867
  • 10
  • 28
3
votes
0 answers

ReactDnD trello-like drag-n-drop interface breaks with touch backend

I have a trello-like interface in place, implemented in React.js with the awesome ReactDnD library, and it works great with the default html5 backend. I decided to switch to the touch backend to support touch devices. Anyway, when I switched, it…
Ernesto
  • 3,837
  • 6
  • 35
  • 56
3
votes
0 answers

When using React-DnD: How can I / should I even try to the access the state of a wrapped child component?

I'm working on a TreeView component, and I find myself writing a whole lot of code to circument a rather simple problem arising from the use of React-DnD. Case in point: when navigating the tree view with the up and down arrow keys, the node that…
JPNotADragon
  • 2,050
  • 2
  • 25
  • 31
2
votes
0 answers

react-dnd: dragging on overflowed parent

I am using react-big-scheduler library to manage events . When you drag and drop an event to a date that is outside the dates that are showen within the view it does not drop on the right date. so lets say i select quarter and I drag an event from…
Shivam Jha
  • 3,160
  • 3
  • 22
  • 36
2
votes
0 answers

dnd-react unable to drag and drop

I'm making a 4x4 number puzzle where the user is only able to drag adjacent tiles from the empty tile and drop it in the empty type to swap position. I'm using the method isDraggable to figure out if the tile is adjacent to the empty tile and…
bryan lee
  • 33
  • 4
2
votes
0 answers

How drag an Item and drop to different tab/window using React DND?

The scenario is, I want to Drag an element and Drop into a different Window/Tab. I am using React DND for Drag and Drop. There are hardly any examples available for Dragging and Dropping between Tabs. It would be helpful if you can share the path or…
Shehwar
  • 85
  • 1
  • 7
2
votes
1 answer

Passing an Array from one UseState to Another

I'm currently trying to figure out how to pass an array from one useState object to another across two different components. In my first useState I have an array called imagesOriginal, which gets filled with file paths dynamically to various…
Aaron Jones
  • 1,140
  • 1
  • 9
  • 26
2
votes
0 answers

How to drag and drop vertically and horizontally in React Js?

I am new to react JS , I need to drag and drop the list vertically and horizontally at the same it , I have used react-beautiful-dnd , but this library only support one direction at a time , so is there any way I can drag and drop horizontal and…
jashan singh
  • 29
  • 3
2
votes
1 answer

React Card Example issue - Card is replaced instead of being appended to a list of cards in another column

I have been persistently working on this problem where the goal is to drag a card form 'Column 1' and copy that into another column say 'Column 2'. Now when my first card is dragged and drop it into 'Column 2, the card is accordingly added to that…
Mayur Upadhyay
  • 58
  • 5
1 2 3
…
28 29