Chrome establece el cursor en el texto mientras arrastra, ¿por qué?

Mi aplicación tiene muchas características de arrastrar y soltar. Mientras arrastro, quiero que el cursor cambie a un cursor de agarre. Internet Explorer y Firefox funcionan bien para esto, pero Chrome siempre cambia el cursor al cursor de texto.

Ninguna de estas soluciones funcionó para mí porque es demasiado código.

Utilizo una implementación jQuery personalizada para hacer el arrastre, y al agregar esta línea en el controlador de mousedown hice el truco para mí en Chrome.

 e.originalEvent.preventDefault(); 

Intenta desactivar el evento de selección de texto.

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

Esto desactivará cualquier selección de texto en la página y parece que el navegador comienza a mostrar cursores personalizados.

Pero recuerde que la selección de texto no funcionará en absoluto, por lo que lo mejor es hacerlo solo mientras arrastra y vuelva a encenderlo justo después de eso. Simplemente adjunte la función que no devuelve falso:

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

Si desea evitar que el navegador seleccione texto dentro de un elemento y muestre el cursor de selección, puede hacer lo siguiente:

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

Trampa

No puedes poner el

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

en su controlador “mousedown” porque onselectstart ya se ha activado.

Solución

Por lo tanto, para que funcione, debe hacerlo antes del evento mousedown. Lo hice en el evento mouseover, ya que tan pronto como el mouse entre en mi elemento, quiero que sea arrastrable, no seleccionable. Entonces puedes poner el

 document.onselectstart = null; 

llamar al evento mouseout. Sin embargo, hay una trampa. Mientras arrastra, se puede invocar el evento mouseover / mouseout. Para contrarrestar eso, en su evento de arrastrar / mousedown, establezca flag_dragging en true y establézcalo en false al arrastrar stops (mouseup). La función de salida de mouse puede verificar esa bandera antes de configurar

 document.onselectstart = null; 

Ejemplo

Sé que no está utilizando ninguna biblioteca, pero aquí hay una muestra del código jQuery que podría ayudar a otros.

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

Resolví un mismo problema al hacer que los Elementos no se puedan seleccionar, y agregué una pseudoclase activa en los elementos dragados:

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

Tengo un problema similar al utilizar jQuery UI arrastrable y ordenable (versión 1.8.1), y es bastante específico, así que supongo que está utilizando la misma biblioteca.

El problema es causado por un error en jQuery UI (en realidad una solución para otro error de Safari). Acabo de plantear el problema en jQuery UI http://dev.jqueryui.com/ticket/5678 así que supongo que tendrá que esperar hasta que se solucione.

He encontrado una solución para esto, pero es bastante difícil, por lo que solo la usarás si realmente sabes lo que está pasando;)

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

Simplemente apaga el arreglo que está en el código de la interfaz de usuario jQuery, así que básicamente puede romper algo.

Simplemente use esta línea dentro de su evento de mousedown

 arguments[0].preventDefault(); 

También puede desactivar la selección de texto por CSS agregando esta clase a su elemento arrastrable

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

Estaba enfrentando casi el mismo problema. Quiero que el cursor dentro de mi elemento DIV y todo su elemento secundario sea el predeterminado, las sugerencias de CSS aquí me ayudaron en IE, FF y Opera, pero no para Google Chrome. Esto es lo que hice en DIV padre:

...

Ahora está funcionando bien. Espero que esto ayude.