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
0
votes
1 answer
is React dnd dragging state accessable from outside dragged items
I'm using React Dnd (with mouse backend) for dragging items and it's working like a charm.
However I may have a use case where I want to be able to test:
monitor.isDragging()
From outside the Source and Target components, to know if there's a…
Sami Jmii
- 460
- 7
- 17
0
votes
1 answer
React DND. How to listen for child props from parent?
I have a DragSource and DropTarget as children of parent
How can I listen for isDragging prop of DragSource from parent?
sAs59
- 562
- 2
- 7
- 30
0
votes
1 answer
React DND dynamic DropTarget by props
I'm trying to use DND for 2 containers.
1) container have static data form axios => tasks list.
2) container have only tasks which were set to user.
When…
marczak
- 489
- 2
- 8
- 17
0
votes
1 answer
How do you move a dragsource with React-DND?
How do you make the source element move with the mouse cursor using react-dnd?
This is what I am doing (simplified example):
import React from 'react';
import ReactDom from 'react-dom';
import {DragDropContext, DragSource} from 'react-dnd';
import…
Alex McMillan
- 17,096
- 12
- 55
- 88
0
votes
1 answer
How can I hide an element while dropping using React DnD with a custom drag preview?
I am using React DnD to handle dragging and dropping in a React app. I am using the touch backend. In this implementation, I am using a custom drag preview. While dragging, I hide the element that is "being dragged" by animating its max-height to 0.…
Nick
- 1
- 3
- 4
0
votes
1 answer
React Js, How can I save multiple data in onClick?
I have table, which is positioned by x value and y value. These values are saved in database. I am using react dnd to positioning these table.
What I am trying to do now is that save all tables position at one click. To do that I made code like…
D.R
- 829
- 4
- 16
- 30
0
votes
1 answer
React-Dnd: Dynamic DropTarget and DragSource type
I'm building a multi-level nestable drag and drop list. Each nested list needs to allow dragging only within itself. This requires setting a run-time type for the DragSource and DropTarget.
Compile time type declaration works but is limited
export…
Anshuul Kai
- 3,876
- 2
- 27
- 48
0
votes
1 answer
How can I lift a child's state to its parent so I can send it back down as props?
I am using react-dnd and most of their internal functions take component as a parameter so we can determine the components size and stuff in that function. Component provides a reference to the component itself so we can do stuff like…
Username
- 1,950
- 2
- 12
- 21
0
votes
1 answer
How can I allow these card components to cover the white space completely?
When I render this component WITHOUT the wrapping 'div' tag the ui works fine.
Hoop.js
return connectDropTarget(
<--works fine if I take this guy out
Username
- 1,950
- 2
- 12
- 21
0
votes
1 answer
React DnD drags whole list of cards instead of single card
I am trying to use react DnD in my react Project. In my render method I define a variable named Populate like show below, which returns a list of cards like this
render() {
var isDragging = this.props.isDragging;
var…
EdG
- 2,243
- 6
- 48
- 103
0
votes
1 answer
How can I use DragSource and Connect for a same component
I have a react component. I want to use DragSource and Connect in the component.
export default connect(mapStateToProps, matchDispatchToProps)(ExpandableCard);
export default DragSource(Types.CARD, cardSource, collect)(ExpandableCard);
How can I…
EdG
- 2,243
- 6
- 48
- 103
0
votes
1 answer
React/Redux/ReactDnd - Error: removeComponentAsRefFrom
I am trying to apply a basic example of react DnD to my project (as a proof of concept) and am running into some issues. I am using this example - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive . which just let…
ajmajmajma
- 13,712
- 24
- 79
- 133
0
votes
1 answer
Getting the mouse position in the canDrag method of the DragSource spec
Below is the canDrag method of my drag source spec:
const itemDragSource = {
canDrag(props, monitor) {
if(props.canDrag && !props.canDrag(props.itemData)) {
if(props.dragUndraggable){
debugger;
…
cclusetti
- 343
- 1
- 2
- 11
0
votes
0 answers
DragSource component disappears when using Yahoo ReactDnD touch backend
I am learning ReactDnD through an example on its documentation page:
(gaearon.github.io/react-dnd/examples-dustbin-single-target.html)
The issue I encountered is that DragSource component disappears when I use ReactDnD touch backend and the…
make2514
- 43
- 1
- 7
0
votes
1 answer
react-dnd : Check if dragged source is before of after original place in ordered list
I'm using react-dnd. I want to know if the currently hovered target is before or after the dragged source in an ordered list of dnd dom objects and pass this to the dom object as a css class. I want to be able to compare props between source and…
user1204800
- 46
- 1
- 6