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.

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.

• javascript
• css
• google-chrome
• drag-and-drop

• Do they have to marked up as anchor tags? – FishBasketGordo Commented Jul 21, 2011 at 4:20
• 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 Commented Jul 21, 2011 at 4:32
• 1 Well, you might want to give the question more than 17 minutes before you make any big changes to your app. – FishBasketGordo Commented Jul 21, 2011 at 4:36
• FWIW My chrome doesn't do that. I'm using Chrome 12. – Stephen Commented Jul 21, 2011 at 4:40
• I am too but it's the Mac version. Probably should have mentioned that. – Chiraag Mundhe Commented Jul 21, 2011 at 4:48

3 Answers 3

Try use event.preventDefault() in onmousedown

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

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/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/p/chromium/issues/detail?id=1232555

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);
}