Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

isDragging

See original GitHub issue

Hi, I’m having problem with isDragging - it stays on original position instead of moving with dragged element (red border). This probably is not a bug, just me not knowing how this works.

I’m updating data via flux, doing nothing with isDragging.

http://fluid.cz/projects/react-dnd/

http://fluid.cz/projects/react-dnd/code.zip

Thanks for help

Issue Analytics

State:
Created 9 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

9reactions

gaearoncommented, Mar 4, 2015

Oh, I see your point now. The problem in your example is fixed by giving your items a unique key each. (It may be some global ID, just not the index.) There’s a warning in console about that. If you give them keys, React will move the original component, so isDragging will be relevant.

It’s not perfect we can’t handle the situation gracefully without keys. This will be a good stress case for whatever API we implement in #64 but we don’t support this yet.

2reactions

gaearoncommented, Mar 4, 2015

isDragging only reflects the state of dragging. The item won’t move “by itself” because we’re not touching the DOM in React DnD—we’re letting you do it.

You have two options:

Let the browser draw drag preview (happens by default) and hide the “real” component when isDragging is true by either returning null from render or using opacity: 0. Sortable example covers this technique.
Give the browser an empty image as drag preview (note that this currently won’t work in IE). Use a custom drag layer to draw your own component as it moves across the screen. This way you can have any customization you want. Drag around custom example covers this technique.

Hope it helps!