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 always changes the cursor to the text cursor.

Answer 1

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 2

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 3

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

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

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 6

I have a similar issue using jQuery UI draggable and sortable (ver. 1.8.1), and it's quite specific, so I assume that you are using same library.

Problem is caused by a bug in jQuery UI (actually a fix for other Safari bug). I just raised the issue in jQuery UI http://dev.jqueryui.com/ticket/5678 so I guess you will need to wait till it's fixed.

I've found a workaround for this, but it's quite hard-core, so you only use it if you really know what is going on ;)

if ($.browser.safari) {
    $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
    $.ui.mouse.prototype._mouseDown = function(event){
        event.preventDefault();
        return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
    }
}

It simply switches off the fix that's in jQuery UI code, so basically it may break something.

Answer 7

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 8

I was facing almost same problem. I want cursor inside my DIV element and all its child to be the default, the CSS tips here helped in IE, FF and Opera, but not for Google Chrome. Here is what I have done in parent DIV:

<div ... onselectstart="return false;" ... > ... </div>

Now it is working fine. Hope this help.