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
2
votes
1 answer

DragSource is not found in react-dnd

I'm learning about drag and drop in react, but I keep getting this error (see image) that DragSource doesn't exist in react-dnd. I have installed react-dnd using "npm install react-dnd". I haven't seen any answer to this bug in my of the research I…
Linda G
  • 21
  • 3
2
votes
1 answer

How to account for page scrolling with react-DND drop events?

I have a react DND item on a 'board' which triggers a page scroll if you pull it far up/left/right/down from its original position. The scrolling during hover is working well, but I have an issue where when I drop the item, it only drops relative to…
John Shanks
  • 165
  • 9
2
votes
2 answers

TypeError: Cannot read properties of undefined (reading 'url')

I'm working on building a drag and drop card game. I'm not familiar with using the library react-dnd I wonder if this has something to do with it. If I use data already on the file, it works fine, but if I have to fetch the data, it creates This…
manuel taveras
  • 81
  • 1
  • 1
  • 4
2
votes
0 answers

React DnD - Is it possible to only show the element being dragged in the drag preview, rather than also showing elements behind it?

Similar to this post here: Drag and drop - The fixed element showing up on the drag image Say for example, I have an element absolute positioned over a background image. If I drag and drop that element, the drag preview also shows the piece of the…
jbcortez89
  • 75
  • 7
2
votes
0 answers

Can you cancel a drag programmatically

I am assuming, though I don't know for sure, that while a react-dnd drag is going on, it is possible for the handler of an async event [such as a setTimeout handler or the receipt handler of a websocket message] to get scheduled on the event loop.…
Azad Bolour
  • 21
  • 1
2
votes
1 answer

MUI tree view with React-dnd

I have a material ui v4 treeview that is working fine with react-dnd using the code below. When I upgrade to mui v5 treeview, the drag does not work anymore, the item is no longer draggable. I had a look between the 2 TreeItem implementation but…
Charles
  • 33
  • 4
2
votes
1 answer

How to implement react-dnd useDragLayer?

I have a component that currently uses the useDrag hook to connect to react-dnd. It works well, except for previews. I want to implement useDragLayer instead to see if it would help with my preview problems, as many online threads suggest. This is…
Michal Kurz
  • 1,592
  • 13
  • 41
2
votes
0 answers

Drag and drop folders into other folders (like a file system) with React - React Drag and Drop?

I'll soon be tasked with implementing some drag and drop UI that allows for the creation of folders, and then the nesting of folders within folders, and then the nesting of folders within folders...and so on. You get it - basically a filesystem. My…
elderlyman
  • 500
  • 8
  • 24
2
votes
0 answers

dropping a draggle block between an array of droppable elements not working correctly

I am working with react-dnd. What I am trying to achieve is dragging the block from the left and dropping it between already existing blocks. I have tried to replicate my issue in codesandbox. Link to which is here I am facing two issues here First…
shiva shukla
  • 119
  • 2
  • 11
2
votes
1 answer

react context weird data type errors

I have been trying to learn about the react context and how to change it from the child component but i keep getting weird errors here i make an array context and try to change it on item drop from child but it gives me error TypeError: context.push…
Omar Alhussani
  • 162
  • 1
  • 12
2
votes
1 answer

Reactjs drag and drop

Is there a plugin to achieve drag and drop like this in reactjs? I tried with react-rnd and react-beautiful-dnd.
Rahul CS
  • 61
  • 3
2
votes
0 answers

React DND drop position flickers by 4 - 6 pixels in some browsers

I am using React-DND in my project. I cannot place the drop component in exact position. e.g: if i try to place it in x:20 y:20 from any point, the final position of component after dropped is x:14 y:16. While in some browsers and OS this doesn't…
Sawal Timsina
  • 69
  • 1
  • 10
2
votes
1 answer

Adding drag`n`drop(react-dnd) to Material-UI component [TreeView]

I have a question. I created a TreeView and tried to bind the drag'n'drop, everything works, the TreeItem can be moved. BUT. If you expand any TreeItem and try to drag it, then all its child TreeItems will move with it. How to make only one TreeItem…
Liquinder
  • 31
  • 1
  • 6
2
votes
1 answer

Error on implementing react-data-grid 7.0.0 from TS to React

I'm trying to implement DnD functionality in react-data-grid, but I'm getting "TypeError: Object(...) is not a function" Error. There is a same file in TypeSript that I provided in the sandbox(it is only for reference). I'm trying to implement the…
Yash
  • 198
  • 1
  • 12
2
votes
1 answer

How to swap two cards without changing position other cards

I have images in grid form something like this I am well aware of react dnd and it uses hover to get the positions and swap accordingly. What I want : Swap 1 with 4 and 4 with 1 What is happening: While moving image 1 I am hovering it from 2…
The IT gal
  • 197
  • 1
  • 5
  • 15
1 2 3
…
28 29