Is it possible to remove background color when dragging png image?

Question

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 ?

Answer 1

您可以将 css 样式添加到可拖动元素：

transform: translate(0, 0);

Answer 2

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