React DnD is a set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.
Questions tagged [react-dnd]
425 questions
4
votes
1 answer
React DnD with HOC draggable elements throw Cannot set property 'props' of undefined error
I am trying to use React DnD with a number of different draggable elements (different shapes, etc). They are all basically the same and have the same behaviour, so I figured using HOCs would be a good idea.
I have the following HOC that is a…
Gurnzbot
- 3,742
- 7
- 36
- 55
4
votes
3 answers
React BigCalendar drag and drop example not working
I was just going through the BigCalendar drag and drop example HERE. I tried to create a local example of the drag and drop by myself, just to see how the drag and drop works with BigCalendar. I created the following:
Dnd.js
import React from…
Alexander Solonik
- 9,838
- 18
- 76
- 174
4
votes
2 answers
include foreign libs in clojurescript project
I am trying to use react-beautiful-dnd in my new ClojureScript and Reagent application. As per the blog here, it says that I need to include the file using :foreign-libs in my project.clj file.
I have configured it as below
:cljsbuild
{:builds…
S4beR
- 1,872
- 1
- 17
- 33
4
votes
1 answer
React/Dnd: Make a component draggable and droppable at the same time
There are multiple elements, which I want to get draggable and droppable at the same time - using react dnd.
That means I need to drag one of the elements and drop it over another element.
First I defined the dragSource for MyComponent. That works…
user3142695
- 15,844
- 47
- 176
- 332
4
votes
1 answer
React DND - canDrag depending on component state
I'm facing a problem doing stuff with React-DND.
My question is about preventing dragging a component for a specific state. But "canDrag" can only have props and monitor as Parameters. (monitor.getItem shows null in my case) and I cannot use the…
Marouen Mhiri
- 1,640
- 1
- 14
- 20
4
votes
0 answers
React DnD - conflict with native drop events
I am using React DnD in a SPA I am currently working on and it's built as a plugin for wordpress! Wordpress native media uploader uses HTML5 onDrop event to add files into the media library and since I am using React DnD , I am no longer able to…
Ram Subramanian
- 151
- 4
4
votes
1 answer
How to drag-n-drop TableHeaderColumn from material UI with react-dnd?
How to apply drag-n-drop functionality from react-dnd library to TableHeaderColumn component from material ui
The problem is react-dnd does not support custom tags and suggests to wrap TableHeaderColumn in div but material ui does not allow to wrap…
Denis
- 2,429
- 5
- 33
- 61
4
votes
1 answer
Animation in react-dnd
In this Angular example, if you drag an apple to the orange section and drop it there, then there is an animation which slowly returns the apple to the spot it came from. This visually communicates that dragging an apple to the orange section is not…
Dan Cron
- 1,105
- 12
- 24
4
votes
0 answers
How to avoid native onDrop event from being overwritten for react-dnd?
I'm successfully using react-dnd in a react component for a requirement of the application I'm working on.
Said component also has a button that show a simple modal window:
Daniel Calderon Mori
- 5,466
- 6
- 26
- 36
4
votes
1 answer
React-dnd element style is not updated on drag move
I have adapted react-dnd sortable example to use inside of my application.
I can't make the "opacity" to follow my drag.
When I initially pick the element up opacity is applied:
But when I move it up to change the position opacity is still applied…
Kocur4d
- 6,701
- 8
- 35
- 53
3
votes
1 answer
React beautiful DND: Detected non-consecutive
Using https://www.npmjs.com/package/react-beautiful-dnd after reordering some element for the first time, reordering of the previously moved item is not possible and the console prints
Unable to find draggable with id: XXX
Also, when dragging…
Juanma Menendez
- 17,253
- 7
- 59
- 56
3
votes
0 answers
I am using react-dnd in react version 16.0.1, I cant upgrade the react version but react-dnd is not working in this version
I am getting this error
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Micromerger\realStockExchange\node_modules\react-dnd\dist\core'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to…
Noman
- 594
- 1
- 18
3
votes
1 answer
React-Dnd: drop function not firing in useDrop()
I have a ticket component which contains some data that should be transferred into another place at the database.
const [{ isDragging }, dragref] = useDrag(() => ({
type: ItemType.TICKET,
item: {
// data that should be…
PRSHL
- 1,359
- 1
- 11
- 30
3
votes
2 answers
How to assign two refs to same element
Here I am trying to assign React dnd "drag" ref to existing ref but it is not happening, can any one please help me.
const refs = useRef<(HTMLDivElement | null)[][]>([]);
const [{ isDragging }, drag] = useDrag(() => ({
type: ItemType.item,
…
Lalith Aditya
- 105
- 7
3
votes
0 answers
React DND nested drag,drop not working properly and ref.current returns always nested element
I am setting up a nested drag and drop with React-DnD. The below image gives you a better idea of my approach.
All the elements are Draggable and Droppable. Example - Field one, two, Group 1, Field one Group one, and Sub Group 1 all can be…
user0227
- 113
- 1
- 2
- 7