How to hide a ghost image in a drag event?

Question

I am using the onDrag method in js reaction. I want to drag while I drag the image, but I do not want to show the ghost image. I used css -webkit-user-drag-none: no, but it completely prevents the drag and drop function. I want both of them to work at the same time.

Code example

<img
                    style={{ left: `${pixels}px` }}
                    onDrag={this.dragOn.bind('start')}
                    onDragEnd={this.dragOn.bind(this, 'end')}
                    alt=""
                    height="20"
                    width="15"
                    draggable="true"

Answer 1

In the documentation for the html5 drag-and-drop standard: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragfeedback

, , . - ( ) , new Image()

event.dataTransfer.setDragImage(new Image(), 0, 0);

, - .

Answer 2

componentDidMount:

componentDidMount() {
  this.dragImg = new Image(0,0);
  this.dragImg.src =
  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}

onDragStart:

handleOnDragStart = e => {
  e.dataTransfer.setDragImage(this.dragImg, 0, 0);
}

. setDragImage onDragStart. , onDrag.