How to hide ghost image in reactjs drag event?

user_3913821 0
Viewed 5487

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"
reactjs css html javascript
3 Answers

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.

user_83767130
Related