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
21
votes
2 answers

React-dnd what does $splice do

I am reading an example of the React-dnd project: moveCard(dragIndex, hoverIndex) { const { cards } = this.state; const dragCard = cards[dragIndex]; this.setState(update(this.state, { cards: { $splice: [ …
Cheng
  • 16,824
  • 23
  • 74
  • 104
19
votes
1 answer

Minimal react-dnd hooks example breaks on "Expected drag drop context"

I constructed a minimal example of the react-dnd hooks API in practice and it runs into a runtime error: import { useDrag, useDrop, DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; export default function…
Peteris
  • 3,548
  • 4
  • 28
  • 44
18
votes
4 answers

React Dnd out of position after scroll

I'm using react-beautiful-dnd to make table rows draggable. The dragging is working fine if I am going from top to bottom, and when I scroll the page up it gets out of position. I have no idea why. Also, I didn't find anything weird with css I have…
user10960236
18
votes
2 answers

TypeScript 2.0 with react-dnd gives error "JSX element attributes may not be a union type"

In a TypeScript + React project I am using react-dnd with its DefinitelyTyped typings: interface ExampleScreenProps { a, b, c } interface ExampleScreenState { x, y, z } class ExampleScreen extends React.Component
Aaron Beall
  • 49,769
  • 26
  • 85
  • 103
17
votes
3 answers

React DnD: Avoid using findDOMNode

I don't fully understand it but apparently it isn't recommended to use findDOMNode(). I'm trying to create drag and drop component but I'm not sure how I should access refs from the component variable. This is an example of what I currently…
joshhunt
  • 5,197
  • 4
  • 37
  • 60
15
votes
2 answers

How to integrate react DnD with react fullcalendar?

I have the following simple demo for a drag and drop component using React DnD plugin. Card.js (DropSource) import React, { Component } from 'react'; import { DragSource } from 'react-dnd'; const ItemTypes = { CARD: 'card' }; const cardSource…
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
13
votes
1 answer

monitor.getDropResult() return null

monitor.getDropResult() returns null (I look it console.log). It should return object(dragged item) with its position. Why does it return null? I signature my component with DragSource,DropTarget..but it still returns null Here is my entire…
user1688401
  • 1,851
  • 8
  • 47
  • 83
12
votes
1 answer

Tests using react-dnd with useDrag and useDrop

Has anyone ever been able to test the drag-and-drop functionality from https://github.com/react-dnd/react-dnd using a functional component with useDrag and useDrop hooks? According to the examples found here…
Jodevan
  • 732
  • 1
  • 6
  • 20
10
votes
2 answers

Using shouldComponentUpdate for block component re-render every second

That game developed with react and redux.I am not react-redux developer(I am .net developer) but I must continue that project so I am new in react and redux That game performance is too bad in some android phones.So I analyze project.I see that…
user1688401
  • 1,851
  • 8
  • 47
  • 83
9
votes
2 answers

'react-dnd' does not contain an export named 'DragDropContext'

I tried to use react dnd in my react web application. I create a js file call withDnDContext.js. When I compile it, I received an error 'react-dnd' does not contain an export named 'DragDropContext'. My react-dnd version is latest one 9.3.2 This is…
phoon
  • 369
  • 1
  • 6
  • 21
9
votes
5 answers

React DND - get coordinates of dragged element as the mouse moves

I have an image that when I drag I want to implement a rotation too. The solution I had in mind was to use React DnD to get the xy coordinates of the dragged image position and calculate the difference between the original image location. The…
LeDoc
  • 935
  • 2
  • 12
  • 24
9
votes
2 answers

Is there any option in React-DnD, which enables drop targets based on drag object which intersects over 50% of area in drop target?

I have been working on react-dnd (which is drag and drop component). So, far drop target get identified based on mouse pointer, I am wondering is there any option to change it like, which the drop target needs to get identified based on the drag…
veerasuthan V
  • 330
  • 5
  • 17
8
votes
1 answer

How to resolve 'react-dnd-html5-backend' does not contain a default export?

I'm new to React and trying to emulate the Row Drag & Drop code found here: https://react-table-omega.vercel.app/docs/examples/row-dnd If I open the sandbox, all the default code works fine. If I copy-paste the code locally though, I get the…
Elliptica
  • 3,928
  • 3
  • 37
  • 68
8
votes
1 answer

Get element position in the DOM on React DnD drop?

I'm using React DnD and Redux (using Kea) to build a formbuilder. I've the drag & drop portion working just fine, and I've managed to dispatch an action when an element drops, and I render the builder afterwards using state that the dispatch…
Christian
  • 927
  • 2
  • 13
  • 22
7
votes
3 answers

Beautiful Dnd is not working with react@18

I am trying to include beautiful dnd package in my project but i got error while installing the package. Please tell me if there is any other package like it or the solution of this error.
Mishra Vaibhav
  • 216
  • 3
  • 11
1
2 3
…
28 29