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
2
votes
0 answers
mapStateToProps not updating props - React dnd and redux
I'm working on small drag and drop app.
I want to be able to persist it's state after page refresh so I thought about using Redux and persisting chosen keys.
I'm using React-dnd and have drag and drop logic already in place. On some events (e.g.…
ninigi
- 143
- 1
- 3
- 14
2
votes
1 answer
Dragging is very slow with many DOM items on page
React DnD doesn't appear to scale well.
I have a list of five hundred drop targets and it take several seconds to pick up an element.
Is there anyway of speeding this up?
The list scrolls perfectly smoothly.
Ian Warburton
- 15,170
- 23
- 107
- 189
2
votes
1 answer
Compilation problems while learning React DND
I am starting to learn React Drag and Drop from http://react-dnd.github.io/react-dnd/docs-tutorial.html
But I am having problems understanding the tutorial. Next are all the files I created but at compilation I get:
dragDropBundle.js:830 Warning:…
Jose Cabrera Zuniga
- 2,348
- 3
- 31
- 56
2
votes
0 answers
TypeSCript ReactDnd example
There is a lot of examples online which use Babel syntax, I've tried it but most of it is not compatible with Typescript 2.1
javaallone
- 61
- 1
- 5
2
votes
1 answer
React DnD change div style only when dragging
I am implementing the drag and drop mechanic using react-dnd library, but I find it hard to style my drop targets. I want to show the user which drop target is available to drop on, but using the isOver and canDrop will only style the item that is…
Justplayit
- 667
- 1
- 7
- 22
2
votes
1 answer
Element type is invalid when creating DragDropContext
Given the following....
var root2 = ;
var AppDnD = ReactDnD.DragDropContext(ReactDnDMultiBackend.default(RDMBHTML5toTouch.default))(root2);
ReactDOM.render(root2, document.getElementById('content'));
I get...
Warning: React.createElement:…
Ian Warburton
- 15,170
- 23
- 107
- 189
2
votes
1 answer
React DND - Use different name prop for each compoents
I'm trying one of react-dnd code examples: https://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Single%20Target/Dustbin.js
const boxTarget = {
drop() {
return { name: 'Dustbin' }
}
}
@DropTarget(ItemTypes.BOX, boxTarget,…
CherryBelle
- 1,302
- 7
- 26
- 46
2
votes
2 answers
React.js - Array.unshift() not updating array on front-end
I have a small implementation of drag and drop using react-dnd. There are two columns, dragging from right side column to the left one activates the specific status item.
On drop, pushCard() is called, which (as the name suggests), pushes the…
Muhammad Arslan Aslam
- 69
- 1
- 11
2
votes
2 answers
How to integrate react-dnd into admin-on-rest?
Has anyone tried to integrate react-dnd or another lib into admin on rest?
I wanted to make datagrid draggable inside a referencearrayfield.
Should i write my own component overriding datagrid or there's a simple way to do it?
Thanks!
annared
- 81
- 4
2
votes
2 answers
How to convert decorator syntax to ES6?
I am trying to understand some code React written in ESnext (decorators).
I know how to convert decorators from ESnext to ES6 syntax
// ESnext
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
…
Manuk Karapetyan
- 534
- 4
- 19
2
votes
2 answers
During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected?
import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
let newStyle = {'display':'none','left':'0px'} ;
let target = {
…
Neha AB
- 60
- 1
- 9
2
votes
1 answer
ReactDnd drag preview - finding the right pattern
I'm trying to implement a simple drag preview that overrides the default browser behavior, but I can't seem to find the right pattern, and the documentation refers to a simple set of examples without explaining the larger context of how layers…
Adam Donahue
- 1,618
- 15
- 18
2
votes
1 answer
Reactjs - Drag and Drop (react-dnd) troubleshot
I have reactjs test project coded like this.
import React, { Component, PropTypes } from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Square from './Square';
…
Flip
- 133
- 1
- 9
2
votes
1 answer
Can react-dnd work with higher order component?
I'm creating a form builder and need to be able to re-order the fields so I'd like to keep all the boilerplate drag / drop code in one re-usable place and a higher order component seemed like a good way to do that. So I have some code like…
pogo
- 2,287
- 2
- 25
- 36
2
votes
1 answer
Using mouse wheel scroll while dragging in react dnd
I have a specific web application where mouse wheel scrolling while dragging can save a lot of time. The code is written in React with React DnD (https://github.com/react-dnd/react-dnd) and HTML5 backend.
Unfortunately mouse wheel scrolling while…
d3m0n
- 366
- 1
- 3
- 15