I am trying to make a chess game in react-js using react-dnd

I am trying to make draggable and droppable png images between different div(which represents the board squares)

I tried to set the opacity of the image background-color to 0 but it doesn't work

The problem is that images take the square background-color when i drag them Is it possible to remove it from the dragging image ? If not is there another drag and drop library that makes it possible ?

I am trying to make a chess game in react-js using react-dnd

I am trying to make draggable and droppable png images between different div(which represents the board squares)

I tried to set the opacity of the image background-color to 0 but it doesn't work

The problem is that images take the square background-color when i drag them Is it possible to remove it from the dragging image ? If not is there another drag and drop library that makes it possible ?

• javascript
• reactjs
• drag-and-drop
• react-dnd

• Wele, please see stackoverflow./help/how-to-ask on how to ask and stackoverflow./help/mcve how to create a minimal plete example – SakoBu Commented Apr 13, 2019 at 19:36

2 Answers 2

you can add css style to your draggable element:

transform: translate(0, 0);

The key is to have the preview contain just the image of the piece, and not wrap more than that. If you edit your question to point to more code, I might be able to help you more.

For example:

const Knight = ({ connectDragSource, connectDragPreview, isDragging }) => {
  return (
    <>
      <DragPreviewImage connect={connectDragPreview} src={knightImage} />
      <div
        ref={connectDragSource}
        style={Object.assign({}, knightStyle, {
          opacity: isDragging ? 0.5 : 1,
        })}
      >
        ♘
      </div>
    </>
    )
   }

Full code. See Knight.jsx