How to hide ghost image in reactjs drag event?

Question

I'm using onDrag method in react js. I want to happen drag while i'm dragging the image, but I don't want to show the ghost image. I used css "-webkit-user-drag:none", but it is completely prevent the drag functionality. I want both to work in same time.

Sample code,

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

score 10 · Answer 1 · answered Mar 02 '18 at 19:53

First create a small transparent image in componentDidMount:

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

Then in your handler for onDragStart:

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

Note: You have to call the setDragImage method in the onDragStart handler. It won't work in the method used for onDrag.

vassiliskrikonis · Answer 2 · 2017-08-16T08:11:31.397

4

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

you can see how to change this translucent image it appears under the cursor. You can set to something more discrete image (or canvas) or even to a blank image like a new Image()

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

but I would advise against using a blank image since you need some sort of visual cue for the drag-and-drop.

edited Aug 16 '17 at 08:11

answered Aug 16 '17 at 07:58

vassiliskrikonis

566
2
10

Lovely! Worked like a charm. – Adrian Smith Jan 08 '20 at 11:28
First time I've ever copied pasted code from SO directly into my code and it worked first try. This needs to be the accepted answer. – PsiKai Mar 11 '22 at 21:06

user8376713 · Answer 3 · 2022-04-14T10:05:12.940

0

I would also add css property : user-select: none;for the entire drag and drop area, since selecting area as text (enable by default in many cases), cause the text itself to be draggable, which might look the same as dragging your draggable element (image or just a div), when in fact it is not, further causing confusions and bugs.

edited Apr 14 '22 at 10:05

answered Apr 14 '22 at 09:26

user8376713

397
3
5

How to hide ghost image in reactjs drag event?

3 Answers3