Drag and drop pieces not working on laptop with touch screen.

[alexandrelipp]

First of all, thank you for the great library!

The drag-and-drop functionality using touch does not work on a laptop touch screen. I believe it has something to do with the browser desktop environment. Everything works fine on a mobile touch screen of similar size (I tested with an iPad).

Could being in a desktop browser environment disable touch?

[Manukyanq]

Hi! Can you try to explicitly set drag-and-drop backend using customDndBackend prop and see does that help?

import { TouchBackend } from "react-dnd-touch-backend";
// ...
 return <Chessboard customDndBackend={TouchBackend} />

also see how we decide wether activate touch effects or not: https://github.com/Clariity/react-chessboard/blob/main/src/chessboard/index.tsx#L57 and check please what returns your browser when you run "ontouchstart" in window command ?

[alexandrelipp]

Setting the TouchBackend explicitly works indeed. ontouchstart is not defined: This could be used instead to detect if it's a touch screen? : https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/

This being said, is there a way to make it work either way (with a mouse or with touch)? Do I need a custom dndBackend?

[Manukyanq]

This should help to make them both work:

import { TouchBackend } from "react-dnd-touch-backend";
// ...
 return <Chessboard customDndBackend={TouchBackend} customDndBackendOptions={{ enableMouseEvents: true }} />

More info how to configure your DnD settings you can find here: https://react-dnd.github.io/react-dnd/docs/backends/touch#options

[alexandrelipp]

Yep, that is perfect! Thank you for the support