I have an draggable div in a react app. When I enable dragging by using draggable={true}
, I see a ghost image is created and it follows the mouse movement. I just wanted to get rid of it.
My actual component is the first one. The ghost image is the second one.
When I looked up for it, I found this stackoverflow solution. Implemented the following code snippet, and it cleared the old ghost.
let img = new Image();
img.src = empty; // this is just an empty png file
const onDragStartHandler = (event) => {
event.dataTransfer.setDragImage(img,0,0)
// ...
}
However, now I see a different animation for a fraction of a second at the very beginning of the drag operation. How can I remove that? Or is there a way to completely disable the dataTrasfer? Tried event.dataTransfer.clearData()
but it did not worked out.