chrome sets cursor to text while dragging, why?

Question

My application has many drag and drop features. While dragging I want the cursor to change to some grab cursor. Internet Explorer and Firefox work fine for this, but Chrome

Answer 1

I solved a same issue by making the Elements not selectable, and adding an active pseudo class on the draged elements:

* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}

Answer 2

None of these solutions worked for me because it's too much code.

I use a custom jQuery implementation to do the drag, and adding this line in the mousedown handler did the trick for me in Chrome.

e.originalEvent.preventDefault();

Answer 3

Just use this line inside your mousedown event

arguments[0].preventDefault();

You can also disable text selection by CSS adding this class to your draggable element

.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 4

Pitfall

You cannot put the

document.onselectstart = function(){ return false; };

into your "mousedown" handler because onselectstart has already been triggered.

Solution

Thus, to have it working, you need to do it before the mousedown event. I did it in the mouseover event, since as soon as the mouse enters my element, I want it to be draggable, not selectable. Then you can put the

document.onselectstart = null;

call into the mouseout event. However, there's a catch. While dragging, the mouseover/mouseout event might be called. To counter that, in your dragging/mousedown event, set a flag_dragging to true and set it to false when dragging stops (mouseup). The mouseout function can check that flag before setting

document.onselectstart = null;

Example

I know you are not using any library, but here's a jQuery code sample that might help others.

var flag_dragging = false;//counter Chrome dragging/text selection issue
$(".dragme").mouseover(function(){
    document.onselectstart = function(){ return false; };
}).mouseout(function(){
    if(!flag_dragging){
        document.onselectstart = null;
    }
});

//make them draggable
$(".dragme").draggable({
    start: function(event, ui){
        flag_dragging = true;
    }, stop: function(event, ui){
        flag_dragging = false;
    }
});

Answer 5

Try turning off text selection event.

document.onselectstart = function(){ return false; }

This will disable any text selection on the page and it seems that browser starts to show custom cursors.

But remember that text selection will not work at all, so it's the best to do it only while dragging, and turn it on again just after that. Just attach function that doesn't return false:

document.onselectstart = function(){ return true; }

Answer 6

If you want to prevent the browser from selecting text within an element and showing the select cursor, you can do the following:

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);