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.

Answer 1

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

Answer 2

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