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

React dnd to push object of dropped item to component's state.

In my component, there are local state of paid and droppedItems. constructor () { super(); this.state = { droppedItems: [], }; And I specified drop specification like below, drop(props, monitor) { const orderItem = monitor.getItem(); …
D.R
  • 829
  • 4
  • 16
  • 30
2
votes
1 answer

ReactDnD sorting elements not updating on Dragging

Hello i am following this code from this example to make a similar component. My component is working as i expected (it is sorting correctly when drag and drop) but when i am dragging the card the opacity 0 must follow the dragging element to "feel"…
Neto Braghetto
  • 1,371
  • 1
  • 15
  • 30
2
votes
1 answer

react-dnd getDecoratedComponentInstance() is not a function

I am currently building a feature for file upload and sorting within react. I have used the following…
Greg
  • 113
  • 1
  • 14
2
votes
2 answers

Reordering table columns with react via drag and drop

I have an html table that should be able to reorder rows as well as columns. Reordering rows is pretty straight forward but reordering columns is pretty hard since the cells of a column do not share the same parent element. …
HaNdTriX
  • 28,732
  • 11
  • 78
  • 85
2
votes
0 answers

react dnd nesting level on hover

I want to implement a drop system where if drop targets are nested you can cycle between them using the mouse scroll wheel (or have an automatic cycle happen after a certain amount of time) this will be particularly useful because many of the nested…
Jack Allan
  • 14,554
  • 11
  • 45
  • 57
2
votes
0 answers

How can i calculate left and top position of Drag preview in React DnD?

I am using React DnD for drag and drop in my application. React DnD I need to know how to implement Drag preview and position it while dragging.
Amala James
  • 1,336
  • 3
  • 16
  • 32
2
votes
1 answer

ReactDnD, enable to create a simple DragDropContext - DragSource example

I am new to React and following this tutorial for adding Drag'n'Drop to my application I was following the tutorial step by step to create a chess board with a draggable knight piece, but couldn't get it to work (Still unable to drag the knight) …
MichaelB
  • 1,332
  • 1
  • 15
  • 29
1
vote
1 answer

Issues with react-dnd when transitioning from Webpack to Vite

I am in the process of migrating my application from Webpack to Vite. For the most part, everything has been smooth, but I've encountered an issue with react-dnd. Interestingly, this problem only arises when I run my app locally. Below is the…
Tasos Tsournos
  • 314
  • 2
  • 9
1
vote
1 answer

React DND how to get the coordinates of the droped element

I am aware of lots of other posts on this topic, but none seem to be exactly what I am looking for, and I am unable to find the answer by my self. I am using react DND version 16.0.1 I want to drop elements into a vertical timeline. I am able to…
bwright
  • 896
  • 11
  • 29
1
vote
0 answers

DnD how to disable draggable for a specific component inside of the Draggable?

I have a MUI Row object in a table, where every Row is draggable. Inside the Row I have a object that users can drag the slider left/right. I need to disable the draggable behavior for the slider inside the Row object.
TrollBearPig
  • 496
  • 1
  • 7
  • 17
1
vote
1 answer

I need to fix drag and drop issue for backward case

I am using react-dnd for drag and drop I implemented that for my color code it's working but my issue is if I forward one color that works fine if I push that in any color but when I backward any color I need to take that color to the next the…
user12302978
1
vote
0 answers

Error: Cannot have two HTML5 backends at the same time. When I use "SortableTree"

I got error "Error: Cannot have two HTML5 backends at the same time." when I'm trying use SortableTree from link in NextJS This Error and This is my code. import { UniType } from "@/types/unitType"; import React, { useState, useEffect, useRef }…
SuperDog
  • 21
  • 1
1
vote
0 answers

After moving an item in kanban board , the item index is not updated

I am building a Kanban board in React DND for learning react. Each board has a list, and each item is assigned an index at render time. I want the state to be updated with each drag-drop, but after I activate setState, the index is not updated, so…
user56963
  • 11
  • 1
1
vote
0 answers

"Invalid hook call. Hooks can only be called inside of the body of a function component" when trying to use React hooks

I used React dnd. But when I tried to run, the following error came. Invalid hook call. Hooks can only be called inside of the body of a function component This was the code I tried import { DndProvider } from "react-dnd"; import { HTML5Backend }…
Vithursan Thevendran
  • 21
  • 1
1
vote
0 answers

Contrary to Firefox, "onDragStart" is called by Chromium when a component is newly mounted

When a component is newly mounted, onDragStart is called by Chrome (neither onMouseDown nor onPointerDown are called) while in Firefox this does not happen (nothing is called). This causes libraries like "React DnD" to not work as expected. See the…
VicVen
  • 11
  • 1
1 2 3
…
28 29