Chrome sets the cursor on the text when dragging, why?

Question

My application has many drag and drop features. When dragging and dropping, I want the cursor to change to some capture of the cursor. Internet Explorer and Firefox are great for this, but Chrome always changes the cursor to a text cursor.

Answer 1

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

I am using a custom jQuery implementation to perform drag and drop, and adding this line to the mousedown handler helped in Chrome.

 e.originalEvent.preventDefault(); 

Answer 2

Try disabling the text select event.

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

This will turn off any text on the page, and it seems that the browser is starting to show user cursors.

But remember that text selection will not work at all, so it’s best to do this only by dragging and dropping it again after that. Just attach a function that does not return false:

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

Answer 3

If you want to prevent the browser from selecting the text inside the element and show the selection cursor, you can do the following:

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

Answer 4

Pitfall

You can not put

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

to your mousedown handler because onselectstart is already running.

Decision

So for it to work, you need to do this before the mousedown event. I did this in the mouseover event, since as soon as the mouse enters my element, I want it to be dragged, not selected. Then you can put

 document.onselectstart = null; 

call the mouseout event. However, there is a catch. While dragging, you can trigger the mouseover / mouseout event. To counter this, in your dragging / mousedown event, set the dragging flag to true and set it to false when dragging the stops (mouseup). Mouseout function can check this flag before setting

 document.onselectstart = null; 

Example

I know that you are not using any library, but here is a jQuery code example that may 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 the same problem by making Elements impractical and adding an active pseudo-class class to clothed elements:

 * { -webkit-user-select: none; } .your-class:active { cursor: crosshair; } 

Answer 6

I have a similar problem using jQuery UI draggable and sortable (version 1.8.1), and it is quite specific, so I assume that you are using the same library.

The problem is caused by an error in the jQuery user interface (this is actually a fix for another Safari error). I just raised a question in the jQuery user interface http://dev.jqueryui.com/ticket/5678 , so I think you will need to wait until it is fixed.

I found a workaround for this, but it's pretty tough, 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 just disables the fix that is in the jQuery UI code, so basically this can break .

Answer 7

Just use this line inside the mousedown event

 arguments[0].preventDefault(); 

You can also disable text selection with CSS by 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 had almost the same problem. I want the cursor inside my DIV element and all its children to be the default, CSS tips here helped in IE, FF and Opera, but not for Google Chrome. Here is what I did in the parent DIV:

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

Now it works fine. I hope for this help.