web-dev-qa-db-fra.com

chrome place le curseur sur le texte pendant le glissement, pourquoi?

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

textcursorgoogle-chromedrag
56
user307635

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

J'utilise une implémentation jQuery personnalisée pour faire le glisser, et l'ajout de cette ligne dans le gestionnaire mousedown a fait l'affaire pour moi dans Chrome.

e.originalEvent.preventDefault();
73
tim

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

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

Cela désactivera la sélection de texte any sur la page et il semble que le navigateur commence à afficher des curseurs personnalisés.

Mais rappelez-vous que la sélection de texte ne fonctionnera pas du tout, il est donc préférable de le faire uniquement en faisant glisser et de le réactiver juste après. Attachez simplement une fonction qui ne retourne pas false:

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

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

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

Piège

Vous ne pouvez pas mettre le

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

dans votre gestionnaire "mousedown" car onselectstart a déjà été déclenché.

Solution

Ainsi, pour le faire fonctionner, 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 glissable, non sélectionnable. Ensuite, vous pouvez mettre le

document.onselectstart = null;

appeler dans l'événement mouseout. Cependant, il y a un hic. Pendant le glissement, l'événement mouseover/mouseout peut être appelé. Pour contrer cela, dans votre événement dragging/mousedown, définissez un flag_dragging sur true et définissez-le sur false lorsque le glisser-déposer s'arrête (mouseup). La fonction mouseout peut vérifier cet indicateur avant de définir

document.onselectstart = null;

Exemple

Je sais que vous n'utilisez aucune 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;
    }
});
7
Finch_Powers

J'ai résolu un même problème en rendant les éléments non sélectionnables et en ajoutant une pseudo-classe active sur les éléments explorés:

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

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

Utilisez simplement cette ligne dans votre événement mousedown

arguments[0].preventDefault();

Vous pouvez également désactiver la sélection de texte en CSS en ajoutant cette classe à votre élément glissable

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

J'étais confronté à presque le même problème. Je veux que le curseur à l'intérieur de mon élément DIV et de tous ses enfants soit la valeur par défaut, les astuces CSS ici ont aidé dans IE, FF et Opera, mais pas pour Google Chrome. Voici ce que j'ai fait dans la DIV parentale:

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

Maintenant ça fonctionne bien. J'espère que cette aide.

2
Alexandre Martins

J'ai un problème similaire en utilisant l'interface utilisateur jQuery déplaçable et triable (version 1.8.1), et c'est assez spécifique, donc je suppose que vous utilisez la même bibliothèque.

Le problème est provoqué par un bogue dans l'interface utilisateur jQuery (en fait un correctif pour un autre bogue Safari). Je viens de soulever le problème dans jQuery UI http://dev.jqueryui.com/ticket/5678 donc je suppose que vous devrez attendre qu'il soit résolu.

J'ai trouvé une solution pour cela, mais c'est assez dur, donc vous ne l'utilisez que si vous savez vraiment ce qui se passe;)

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

Il désactive simplement le correctif contenu dans le code d'interface utilisateur jQuery, donc il peut casser quelque chose.

2
bartaz