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

useDrag method of react-dnd , cannot get isDragging in typescript

I am new to react with typescript, I am implementing drag and drop feature using react-dnd package with typescript. following this blog I am trying to drag images but I am facing an issue Property isDragging does not exist on type unknown code…
Tanuj Doshi
  • 51
  • 2
  • 8
3
votes
0 answers

When using react-dnd, how can I specify the DragPreviewImage's HTML properties?

Starting with the Chessboard Example example, the Knight component is decalred as export const Knight = () => { const [{ isDragging }, drag, preview] = useDrag(() => ({ type: ItemTypes.KNIGHT, collect: (monitor) => ({ …
Yanick Rochon
  • 51,409
  • 25
  • 133
  • 214
3
votes
0 answers

How to save the updated stae values back to database(mongo db) in react-dnd

I am a beginner in learning react.js. I have developed a simple todo app using react-dnd. I was able to implement react onDragEnd function where the cards in each column are able to be dragged and dropped within and between columns. However, once I…
Fernando99
  • 43
  • 4
3
votes
1 answer

Using a handle with React DND

I am using React-dnd, and trying to create a table with sortable rows, which can only be dragged from a handle, which is a small span on the right hand side. The example they give…
Michael
  • 8,229
  • 20
  • 61
  • 113
3
votes
4 answers

React DnD Expected to find a valid target

Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should…
Oscar Balladares
  • 75
  • 1
  • 6
3
votes
0 answers

Disable dropEffect from affecting cursor in HTML5 Drag'N'Drop API

I am building a chessboard and trying to move the pieces using the HTML5 Drag and Drop API. However, whenever I move a piece, a box appears under the cursor which completely ruins the aesthetic feel (see picture). Note: I am using react-dnd if that…
Nathaniel Fernandes
  • 31
  • 1
3
votes
2 answers

How to drop item to empty section in react-dnd?

I'm trying to make a drag and drop list using react-dnd. I have a part-working example: codesandbox example I have a one issue here: I can't drop an item in an empty section. If we move image1 to first or third group, we can't go back to second…
sosick
  • 624
  • 3
  • 17
  • 35
3
votes
1 answer

Make component draggable using react-dnd

I'm trying to drag a component using react-dnd I would try to make like this example but only dragging for the moment. In my app on top of all component I import react-dnd-html5-backend and wrap my app: import Backend from…
infodev
  • 4,673
  • 17
  • 65
  • 138
3
votes
3 answers

React-DnD - Dragging an element to the top of the screen when there's a fixed element on top doesn't scroll the page up

I have a dashboard, with multiple DnD elements and a fixed AppBar on top. I found out that if you drag the element to the top of the page (when you've already scrolled the page down a bit) it doesn't scroll upwards, but if you remove the position:…
Amit Toren
  • 351
  • 3
  • 13
3
votes
1 answer

React dnd too many re-renders with custom drag layer, react.memo

My drag and drop is very slow because of too many re-renders. React.memo doesn't seem to help although I passed all items as primitives. My list looks as follows: const TabList = ({ selectedTabsState, handleItemSelect, windowId, windowIndex,…
html_programmer
  • 18,126
  • 18
  • 85
  • 158
3
votes
0 answers

ReactDND touch backend

Since reactDND library has been merged & upgraded from v7 to v9, react touch backed has been consolidated inside the library. Has anyone solved how to create a preview for a touch screen? I've tried to use DragPreviewImage but with no luck for touch…
Jakub Ojmucianski
  • 187
  • 1
  • 9
3
votes
1 answer

React DnD - How to get ID of dragged item

How can I console log in my file where I have the drop area, the id of the node that I am moving (draggable item). I believe I am supposed to use monitor.getItem(), as specified in the documentation, but I don't understand it, I have a ref={drag}…
Viktor Rudi
  • 75
  • 1
  • 8
3
votes
3 answers

simple list in react beautiful dnd not working

I've been following the official course on egghead (https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd and sample working code: https://codesandbox.io/s/52p60qqlpp) and wrote this: https://codesandbox.io/s/00k3rwq3qn However,…
Saad
  • 26,316
  • 15
  • 48
  • 69
3
votes
1 answer

Custom Drag Preview for touch screens with [dnd-multi-backend] or [TouchBackend]+[HTML5Backend]+[Modernizr]?

on the dnd-multi-backend library, there are instructions with such text: Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation. But a link to…
Julia
  • 674
  • 1
  • 6
  • 18
3
votes
3 answers

Redux not dispatching action

I'm using React-dnd combined with Redux but I can't dispatch an action. My action is called but the reducer is never called : const spelSource = { drop(props, monitor) { updateD(monitor.getItem(), props.spel); } }; const…
Zeyukan Ich'
  • 651
  • 7
  • 21
1 2 3
…
28 29