DragImagePreview does not work with touch backend

[pandaiolo]

Describe the bug

When using the touch backend, there is no preview of the dragged element. Using DragPreviewImage does not seem to work.

Reproduction

You can find a codesandbox here: https://codesandbox.io/s/festive-borg-z01w6

This is just the DragPreviewImage example, with touch backend instead of html5

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/festive-borg-z01w6
2. Drag with image
3. Div opacity is decreased, showing that dragging has started, but no preview image is visible

Expected behavior

Drag image preview should be visible like with html5 backend.

Desktop (please complete the following information):

• OS: iOS 13.4

• Browser Safari

• OS: Mac 10.15.4

• Browser: Chrome with DevTools Touch simulator

• Version: 80.0.3987.149 (Official Build) (64-bit)

Context:

• Tested with dnd and backend versions ^9 and ^10

[pandaiolo]

I see someone opened a SO question here as well: https://stackoverflow.com/questions/60960230/cant-see-the-item-that-i-am-dragging-using-react-dnd

[jk171505]

I'm having the same problem, any updates on this?

[wunnle]

Same problem here.

[Nickfis]

Same problem for me as well.

[kpettinga]

Same problem only with the MouseBackend from https://github.com/zyzo/react-dnd-mouse-backend

[eeeman1]

same problem when solved?

[jonathonbalogh]

+1 - same issue.

[jpodpro]

same!

[farhantahir]

Facing this issue any solution ?

[smooth-lee]

I solved it using react-dnd-preview.

https://louisbrunner.github.io/dnd-multi-backend/packages/react-dnd-preview/

[mathieuedet]

Same issue. Is it a bug of DragImagePreview ? @smooth-lee 's solution is the only alternative ?

[ddykhoff]

I believe the root cause here is that the HTML5 backend, which utilizes the HTML5 Drag and Drop API, offloads the drag preview generation to the browser API. Since in this case the TouchBackend is being used, this feature doesn't exist. Thus no drag preview is automatically generated for you.

I believe that the react-dnd framework solution would be to use useDragLayer and make your own CustomDragLayer component. There is an example here on how to do so. Although, this is essentially what the react-dnd-preview library handles for you as you can see here.

Personally, I opted to implement the custom drag layer myself, as I already had for another DND use case in my app and also to minimize pulling in additional dependencies.

[rpivo]

After trying @ddykhoff's suggestion to use useDragLayer to create a preview for touch events, I was also able to make this work without installing any external dependencies.

[tommasini]

I tried the solution with useDragLayer and the react-dnd-preview, both of them shows me that I could drag with the touch backend, but I can't drop neither the hover that I set on useDrop works, any one can share a solution or help me?

Thank you!

[dooleyb1]

Still experiencing this issue, when dragging on mobile I am not able to see the element being dragged. Anyone find a decent solution?

[MikeDrewitt]

Still broken. You can use the useDragLayer to show a preview that way. But I find it less performant in general, and annoying that you need to implement it at all when all you want is an image.

[kirlen]

@tommasini I'm having the same problem (drop/hover not working with touch backend). Did you ever get anywhere with this?

[tommasini]

No, I believe I went to other library at that time 😔 good luck 🍀