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

Testing react-dnd drop in a functional component

I am working on implementing "drag and drop" using react-dnd. This involves dragging an item from one component and dropping it into another component. Functionally, it works great, but I am having trouble testing the "drop" so that the function…
Fishspeaker
  • 51
  • 3
5
votes
1 answer

How to implement Drag and Drop in Class based Component in react-dnd

I am new to react and trying to implement drag and drop with react-dnd. However I cant use hooks in class based components. I am getting an error due to the below portion of the code. const [{ isDragging }, drag] = useDrag({ item: {…
Curious-programmer
  • 772
  • 3
  • 13
  • 31
5
votes
0 answers

react-dnd set state or props within hover function

I'm trying to update props within the hover function in my DropTarget but it seems this isn't possible? The action to redraw happens in componentDidUpdate, and I basically want to set some props/state within the value i read inside hover (if pointer…
user648931
  • 503
  • 5
  • 18
5
votes
1 answer

Optimistic React Apollo ui lag with React Beautiful Drag and Drop

I'm trying to create a optimistic response where the ui updates immmediately (minimal lag and better user experience) with drag and dropped data. The issue i'm having however is that it lags anyways. So whats happening is that I expect a list of…
Karan
  • 1,141
  • 2
  • 19
  • 42
5
votes
3 answers

React DnD showing entire list when dragging

I'm trying to integrate React DnD using the List and ListItem of Material UI and, while dragging, the entire list is shown as dragged element. I have tried to follow to the best of my understanding the examples, and here is what I have import React,…
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
5
votes
3 answers

React dnd with auto Scroll

I am working on a react dnd project for which I am following the react-dnd documentation. Everything is working properly but I am not able to scroll while dragging. I need a scroll bar when I am dragging an item and have reached the last droptable…
dom
  • 1,086
  • 11
  • 24
5
votes
1 answer

How do I stub the monitor while testing react-dnd?

I'm trying to test my implementation of react-dnd, and in one of my drop functions I'm using the monitor.getInitialClientOffset() function to get an offset, and I'd like to stub this method to return a particular offset that I can then assert on,…
Ben Hare
  • 4,365
  • 5
  • 27
  • 44
5
votes
1 answer

React ReRender Issue

I'm creating a web app which would allow the user to drag and drag multiple pieces on screen, with each one holding individual specific data. If the user would want to add more pieces onto the screen, they would simply click a button, and another…
Justin E. Samuels
  • 867
  • 10
  • 28
4
votes
1 answer

React MUI TreeView / React DnD: How to use a draggable component?

In my React web app, I would like to drag items from the MUI TreeView on the left to one of the drop targets on the right drag and drop items between the drop targets UI mockup: The second part already works. As for the first part, I did manage…
ssc
  • 9,528
  • 10
  • 64
  • 94
4
votes
2 answers

How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?

What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas"…
Greg
  • 34,042
  • 79
  • 253
  • 454
4
votes
0 answers

How to change style of DragPreviewImage when it's hovering DropTarget in react-dnd reactjs?

I want change DragPreviewImage style, example: scale, fill color, change opacity when it's hovering over DragTarget! Here is my short version example code: 1. DragPhoto component: import React from 'react' import { useDrag, DragPreviewImage } from…
Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
4
votes
7 answers

How can I reset a dragged component to its original position with react-draggable?

I try to implement a function in my app that allows the user to reset all the components that he dragged around to be reset to their original position. I assume that this functionality exists in react-draggable because of this closed and released…
N008Y
  • 43
  • 1
  • 4
4
votes
2 answers

react-dnd sortable list using custom drag layer

I've created a simple sortable list with react-dnd using code similar to react-dnd's sortable example found here in codesandbox. However, I'm having some difficulties trying to to conceptualize how I should tweak this example and utilize react-dnd's…
Andrew Garrison
  • 182
  • 2
  • 11
4
votes
0 answers

React-DND not firing drop and hover on target

I am having some troubles w/ React-DND trying to get the DropTarget-side to work. When I drag the DragSource, the target's canDrop flips to true, but the isOver stays false, even if I drag the source over. For the DropSource I have the…
CodeChimp
  • 8,016
  • 5
  • 41
  • 79
4
votes
1 answer

How do I duplicate a component while preserving state?

I have a component with state that gets updated as a result of some async operations. This component is part of some drag and drop UI, when a user begins a drag operation I need to render this component in a separate part of the application that's…
styke
  • 2,116
  • 2
  • 23
  • 51
1 2
3
…
28 29