Ask about the dataTransfer dragpreview about react-dnd HOT 16 CLOSED

Just found this thread looking for an example of using the equivalent of DataTrasnfer.setDragImage(). Links in the thread seem to be broken, so I'll put here the relevant updated links.

• Documentation with live demo
• Live demo
• Source code
• CodeSandbox version

And using hooks:

• CodeSandbox version

from react-dnd.

I'm not 100% sure I understand your question.

Do you want to:

1. Use custom drag image instead of default (by default, drag source is screenshotted)
2. Change appearance of drag source and/or drop target while dragging occurs
3. Use custom drag preview and change something in it in the middle of a drag operation

?

Do any of the examples help?

from react-dnd.

In my case, when I drag a component or node. The drag over and drag component have same styles. I must use something like this :
var node = _.extend({}, this.getDOMNode());
document.body.appendChild(node);
e.dataTransfer.setDragImage(node, e.clientX/2, this.getDOMNode().offsetHeight/2);

to show the dragging component. And set the drag over with opacity = 0 like you. But got the problem with react id.

In your code you set dataTransfer for dragPreview. But I do not know how to get it?

from react-dnd.

I still don't understand what you're trying to do. Maybe some screenshots would help?

from react-dnd.

I want to use custom drag preview (with custom style). And I want to know how to get dragpreview in your code. I read code and in the function beginDrag() I do not see where the dragpreview in it.

from react-dnd.

Do you want to hide the drag source while item is being dragged? You don't need dragPreview for that, just set opacity to 0 (or return null from render) when this.getDragState(TYPE).isDragging is true.

See this example (tick "Hide source whole dragging" checkbox): http://gaearon.github.io/react-dnd/#/drag-around-naive

Source: https://github.com/gaearon/react-dnd/blob/master/examples/_drag-around-naive/Box.js#L42

Does this help?

from react-dnd.

Thank you @gaearon. I'm writing sortable list. And I want when I drag the item we can change the style of dragging item (and also hide the drag source). For example when we drag the box in the example. We may change the border color to red.

from react-dnd.

@cuongcua90

I see now. Sadly it's not easily possible due to how browser D&D API works but it's something I was experimenting with in this branch. See this example (not in master).

I haven't had time to complete this, but I may be able to do so during next few weeks if it's a priority to you. Let me know if this matches what you're looking for.

Seems like a duplicate of #17.

from react-dnd.

Thank @gaearon so much. I will see your experiment and learn from it. It is exactly what I am looking for.

from react-dnd.

Closing this for now, as this pretty much repeats #17.
Let me know if you come up with something!

from react-dnd.

This is available in 0.8.0 using DragLayerMixin.

Live demo
Source code

from react-dnd.

thanks @gaearon. It works well. Just problem with performance when the drag component is complicated.

from react-dnd.

Just problem with performance when the drag component is complicated.

You should use PureRenderMixin (or manually implement shouldComponentUpdate) to avoid reconciling the child component on each position change. It should be fast in this case. Have you tried it?

from react-dnd.

Added this to docs: 6c95eb1

from react-dnd.

Better now, thanks for your support. It's very good

from react-dnd.

👍

from react-dnd.