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 ?

Welcome, please see https://stackoverflow.com/help/how-to-ask on how to ask and https://stackoverflow.com/help/mcve how to create a minimal complete example — SakoBu, Apr 13 '19 at 19:36

score 4 · Answer 1 · answered Nov 25 '20 at 16:33

4

you can add css style to your draggable element:

transform: translate(0, 0);

answered Nov 25 '20 at 16:33

Frédéric Mascaro

520
1
4
17

1

This is working, but how? – Niyas Nazar Mar 14 '22 at 17:54

score 0 · Answer 2 · answered Apr 30 '19 at 21:55

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

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

2 Answers2