Green plus sign in Chrome

[fredguest]

Has anyone figured out how to get rid of the green plus sign that pops up momentarily at the beginning of a drag operation in Chrome?

[jchristman]

+1

[EvHaus]

Cannot reproduce this issue on Chrome 49 on Mac, or Chrome 49 on Windows on this page: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Is this still happening for you? What version of Chrome are you using and which OS?

Also, can you control the cursor behaviour as described here: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

[eliot-akira]

I'm seeing the issue in all the examples, on Chrome 49 on Mac (still 10.10). On drag start, the cursor changes to a green plus sign (usually displayed by cursor: copy); and then becomes the "move" cursor.

[billyjanitsch]

I'm able to reproduce this sporadically in the example you linked @globexdesigns (Chrome 49, OSX 10.11) -- it only appears for a split second before behaving as expected.

My guess is that it's either a short delay between React's batched render cycle and the browser's dnd implementation (in which case we might be able to fix it) or a bug in Chrome. I'll play around with other browsers (unless someone beats me to it) and see if I can get a repro there.

[jchristman]

I'm seeing the same thing on Chrome 49 OSX 10.11.4 - appears for a split second then returns to normal. The behavior does not happen for me in Safari or Firefox.

[fredguest]

@EvNaverniouk I'm on Chrome 49 and OS X 10.11.4 and yes, still seeing the issue, and yes, I see the copy copy icon when expected in this link that you referenced http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html

[pvande]

Also seeing this issue in Chrome 50 on OS X 10.11.2.

[goivemaster]

also seeing this Chrome 51 on OS X 10.10.1

[dwthomas77]

I'm also seeing this on Chrome Version 51 on OSX 10.11.4.

Edit: after adding some more functionality implementing a drag layer and properly including the code using connectDragPreview and getEmptyImage() the problem seems to have gone away for now.

[kesne]

I've seen this randomly in React DnD as well as other libraries and even just raw HTML5 draggable. My guess is that it has to do with us not setting effectAllowed in the dragstart.

[f0rr0]

Any updates on this? Facing the same issue on Chrome 53 OSX 10.10.5

[MinaAzimov]

Seeing the same thing Chrome 54.0.2840.71 10.11.6, any updates?

[gvohra]

+1

Using {dropEffect: 'copy'} masks the problem (by making the green plus always visible); but doesn't properly fix it.

In addition, it seems {dropEffect: 'move'} doesn't appear to successfully make the cursor a 4-pointed cross-hair.

Chrome version: 55.0.2883.95 (Official Build) (64-bit)

[fredguest]

Closing this issue as it does not seem to be a function of this library.

[Yamikamisama]

@fredguest did you ever find a solution to this?

[fredguest]

@Yamikamisama sadly no.

[fej-snikduj]

The green plus button doesn't show up for me until my canDrop function returns false, then it appears.

[oinkbark]

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

This worked for me on chrome. Just put it in the "dragstart" and "dragend" events as those are the only ones that have access to the dataTransfer object.

[willb335]

This didn't help me

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

It happens only for a moment between cursor: 'grab' and cursor: 'grabbing'
It doesn't show in the gif format unfortunately but the pic below the gif shows the problem

[PawelDecowski]

I’m also experiencing this problem. It looks like a bug in Chrome.

[thesnups]

+1

[Phinodel]

+1 chrome version 84.0.4147.89

edit: this only happens when using the following code to not have a preview image:

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

implementing a preview solves this problem

[abdalla-rko]

Hey @Phinodel,
Could you please give an example in code for what you mean with implementing a preview.

[55Cancri]

How to fix this issue in vanilla html drag n drop? It only appears if I drag over an element with a dragOver handler.
This:

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

hides it but it breaks my onDrop handler so I can't use them. Any other ideas?