chrome jeux de curseur de texte tout en faisant glisser, pourquoi?

Question

Mon application possède de nombreuses fonctionnalités de glisser-déposer. Tout en faisant glisser je veux le curseur pour modifier certaines saisir curseur. Internet Explorer et Firefox fonctionnent bien pour cela, mais Chrome change toujours le curseur le curseur de texte.

Answer 1

Aucune de ces solutions n'a fonctionné pour moi parce que c'est trop de code.

J'utilise un custom jQuery mise en œuvre pour faire la traînée, et en ajoutant cette ligne dans l' mousedown gestionnaire a fait le tour pour moi sur Chrome.

e.originalEvent.preventDefault();

Answer 2

Essayez de désactiver la sélection de texte de l'événement.

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

Cela va désactiver toute la sélection de texte sur la page et il semble que le navigateur commence à montrer des curseurs personnalisés.

Mais n'oubliez pas que la sélection de texte ne fonctionnera pas du tout, donc c'est le mieux à faire, il ne tout en faisant glisser, puis allumez-le de nouveau juste après. Il suffit de fixer la fonction qui ne retourne pas false:

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

Answer 3

Si vous souhaitez empêcher le navigateur de sélectionner du texte dans un élément et en montrant l'sélectionnez curseur, vous pouvez effectuer les opérations suivantes:

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

Answer 4

Piège

Vous ne pouvez pas mettre l'

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

dans votre "mousedown" gestionnaire parce que onselectstart a déjà été déclenchée.

Solution

Ainsi, pour avoir de travail, vous devez le faire avant l'événement mousedown. Je l'ai fait dans l'événement mouseover, car dès que la souris entre dans mon élément, je veux qu'il soit déplaçable, non sélectionnable. Ensuite, vous pouvez mettre la

document.onselectstart = null;

d'appel dans l'événement mouseout. Cependant, il ya un hic. Tout en faisant glisser la souris/mouseout événement peut être appelé. Pour contrer cela, dans votre glisser/événement mousedown, définir un flag_dragging de vrai et de le mettre à false lorsque vous faites glisser des arrêts (mouseup). Le mouseout fonction peut vérifier que l'indicateur avant de

document.onselectstart = null;

Exemple

Je sais que vous n'utilisez pas toute la bibliothèque, mais voici un exemple de code jQuery qui pourrait aider les autres.

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

J'ai résolu un problème de même en faisant les Éléments non sélectionnable, et l'ajout d'un actif pseudo classe sur le dragué éléments:

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

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