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
3 answers

Upload file feature using react dnd library in react

I want to create a file upload feature in react using React dnd, where a user should be able to upload files by dropping them in a div
Basanta Sharma
  • 21
  • 1
  • 2
2
votes
1 answer

Does ReactTags work with React 16.12 applications?

I wanted to use ReactTags with my React 16.12 application following the instructions here -- https://www.npmjs.com/package/react-tag-input . I installed react-dnd 11.1.1 . Below is my package.json file { "name": "client", "version": "0.1.0", …
Dave
  • 15,639
  • 133
  • 442
  • 830
2
votes
1 answer

Resizing a material ui card component by click and dragging a corner

I have a list of material ui cards that are in a react-beautiful-dnd list. I want to be able to move cards from one list to another and reorganize them (this is already done). I also want to be able to click, for example, the lower right corner of a…
Davenporten
  • 323
  • 2
  • 13
2
votes
0 answers

Not Getting Exact Position

I am dragging a button from the left side to a container but it is not getting exact where i dropped it here is the code what I am doing in a drop of dropTarget. As it is being dropped inside a container so i have to perform these calculations…
Osama Inayat
  • 191
  • 3
  • 16
2
votes
0 answers

How can I get the ref of the wrapped component of DragSource of react-dnd?

I have a simple React component that I export wrapped with the DragSource high order component of react-dnd. I need to give a reference to my original component to call a public method on it, but can't find anything on the library docs. What am I…
ciaoben
  • 3,138
  • 4
  • 27
  • 42
2
votes
1 answer

Why callback function in react-dnd useDrop hook can't update parent component state?

dnd Hook Api, and want to call parent component callback function to update state in useDrop drop function, however I can only update the parent state from init state. Here is an example, no matter how I drop the div to the dropTarget, the count is…
Yin Waluo
  • 79
  • 9
2
votes
1 answer

how to scroll page while dragging react dnd

i have implemented react dnd in my application but i cant scroll to the top of page while dragging a component how can i solve this problem ? thanks in advance return (
Mar Yem
  • 21
  • 2
2
votes
2 answers

How to fix 'Could not find the drag and drop manager in the context of DragSource(Component)'

I have following code const VisiblePropsPanelItem = React.forwardRef( ({ classes, onChangeValue, attrib, isDragging, connectDragSource, connectDropTarget }, ref) => { const elementRef = useRef(null) connectDragSource(elementRef) …
Sergej
  • 68
  • 4
  • 11
2
votes
0 answers

In which occasions is renderRoot fired on React?

I am trying to optimise an application which has performance issues on drag and drop functionality. I am using react-dnd for that. I have been able to filter out unnecessary re-renders which were clearly slowing the process down. However, when I…
Jaakko Karhu
  • 2,298
  • 4
  • 28
  • 41
2
votes
2 answers

Is it possible to remove background color when dragging png image?

I am trying to make a chess game in react-js using react-dnd I am trying to make draggable and droppable png images between different div(which represents the board squares) I tried to set the opacity of the image background-color to 0 but it…
Leoyin
  • 21
  • 2
2
votes
1 answer

Error "Property 'type' is missing in type 'typeof WithXXX'"

I'm using React with Typescript and try to create a higher order component based on the react-dnd library. The error occurs in the DragSource part of the react-dnd component. This is the corresponding code: import React from 'react'; import {…
microman
  • 141
  • 2
  • 12
2
votes
1 answer

Can't select text within draggable

I find that when a div containing text is draggable I can't select the text. If I remove the DnD stuff then I can select the text. Is there a way of having both?
Ian Warburton
  • 15,170
  • 23
  • 107
  • 189
2
votes
0 answers

Can React DnD be used for implementing resizing

is it possible to use React DnD to implement resizing in general? I'm looking at resizing table columns in a React app. I have not been able to locate any examples of resizing in React DnD docs as of yet..
Emma
  • 226
  • 3
  • 9
2
votes
1 answer

Is there a way to get the content of a file with React-dnd?

I want to make a file uploader with react-dnd but i'm not able to get the content of a file, i can just get metadata about the file, like filename, size, etc. This is the code of the React component where i want to drop the file: import React from…
krionz
  • 417
  • 1
  • 4
  • 15
2
votes
2 answers

How to use React DnD with styled component?

When wrapping my styled component in connectDragSource I get the following error: Uncaught Error: Only native element nodes can now be passed to React DnD connectors.You can either wrap PaneItemText__StyledItem into a
, or turn it into a…
JoeTidee
  • 24,754
  • 25
  • 104
  • 149
1 2 3
…
28 29