3

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 changes anything.

Cursor when dragging.

I did some reading and I believe this shows up because of the dropEffect property (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect).

I have looked at a bunch of other stackoverflow posts but I can't find anywhere how to completely disable this effect from happening.

So... is there some way to get rid of the box from appearing underneath the cursor when I'm dragging?

I have looked at chess.com and lichess.org and neither show that box when you drag a piece, so I know it's possible. Thanks!

0 Answers0