Stopping chrome from changing cursor to a globe while dragging a link

Question

I have a standard link such as:

<a href="/test">Test</a>

In Chrome, clicking and dragging on this link will result in the cursor changing to an arrow dragging a globe. The globe can be dropped on the url or bookmarks bar.

I am trying to implement a drag-and-drop filesystem interface in JavaScript. All files and folders are marked up in "a" tags. When I click to drag one, the globe icon appears and breaks the JavaScript event (in this case, JQuery's mousemove).

Any ideas on how to prevent Chrome from converting dragged links into the globe?

Edit: Using some well-placed event.preventDefault()'s actually does resolve the issue.

No but they are real links that behave exactly like links so they SHOULD be marked up as anchors. If no one has a solution, I will just make them spans or something. — Chiraag Mundhe, Jul 21 '11 at 04:32
Well, you might want to give the question more than 17 minutes before you make any big changes to your app. — FishBasketGordo, Jul 21 '11 at 04:36
I am too but it's the Mac version. Probably should have mentioned that. — Chiraag Mundhe, Jul 21 '11 at 04:48

score 5 · Accepted Answer · answered Jul 21 '11 at 04:57

5

Try use event.preventDefault() in onmousedown

<a href="/test.js" onmousedown="event.preventDefault()">Test</a>

answered Jul 21 '11 at 04:57

Ghostoy

2,689
19
18

2

I'm getting this problem in a React app on a `
` element with no `` tags around or inside of it. The draggable div (with `draggable=true` and `onDragStart` and `onDragEnd` handlers) stops being draggable when I add `onMouseDown={(event) => event.preventDefault()}` which is not surprising, but then how else can I get rid of this globe icon?
– anabella Mar 12 '21 at 11:20
@anabella Take a look at https://stackoverflow.com/a/16283142/3448018 for an alternative – mofojed Jul 23 '21 at 14:21

mofojed · Answer 2 · 2021-07-26T20:31:29.270

This is an old question, but still came up on the top. Doing event.preventDefault() as suggested in another answer prevents drag events from occurring. I found that setting the dataTransfer.effectAllowed property in ondragstart event to something like move gets rid of the globe being set. See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed

I logged an issue against Chromium about not allowing the cursor to be set while a drag event is occurring: https://bugs.chromium.org/p/chromium/issues/detail?id=1232555

score 0 · Answer 3 · answered Feb 01 '22 at 22:16

event.preventDefault() can block dragging actions so if you still want to drag here is a viable solution in Angular:

public handleDragStart( event : DragEvent ) : void {
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);
}

Stopping chrome from changing cursor to a globe while dragging a link

3 Answers3

Linked