[Résolu] Ne pas sélectionner du texte quand une <div> se déplace

Bonjour à tous
J'ai une <div> dont la structure est

<div class="draggable">
    <h3 class="title">
    ...........
</div

Avec

title.addEventListener('mousedown', function(e) {
    enregistrer la position courante de la souris et celle de <div>
});
document.addEventListener('mousemove', function (e) {
    modifier le style.left et style.top de <div> pour suivre la souris
}
document.addEventListener('mouseup', function(e) {
    détruire l'objet contenant les infos permettant de modifier la position de <div>
}

Je constate que lorsque je fais fonctionner le mécanisme il se produit une sélection de texte dans:
- une portion du texte contenu dans la balise <h3>
- certaines balises survolées par le mouvement de <div>
J'ai utilisé event.preventDefault() pour éviter cette sélection de texte, sans succès.
Auriez vous une solution à ce problème agaçant?

Merci de votre aide.

Bonjour,

Pour éviter le mécanisme de sélection de texte, tu peux utiliser dans le css pour l'élément ciblé :

user-select: none;

Dans ton cas, tu peux sans doute te contenter de donner ce style à ta div au moment où tu commences à la déplacer, et lui redonner à la fin le style par défaut qui est :

user-select: auto;

EDIT: en te relisant, je pense qu'il conviendra sans doute aussi de désactiver le mécanisme de sélection pour tous les éléments survolés.

Amicalement,
Modifié par parsimonhi (07 Jan 2019 - 15:13)

Merci beaucoup
Je crains également qu'il faille désactiver le mécanisme pour tous les éléments qui risquent d'être survolés, ce qui veut dire tous les éléments de la page !
Je n'ai pas l'intention de faire cela statiquement, ça voudrait dire que rien n'est sélectionnable dans la page.
Je vais essayer de faire cela statiquement pour la balise titre et dynamiquement pendant le mouvement pour toute la page.
Mais comme je me suis lancé dans la mise du site en MySQL, je ne vais peut être pas le faire tout de suite.

Bonjour,

PapyJP a écrit :
Je vais essayer de faire cela statiquement pour la balise titre et dynamiquement pendant le mouvement pour toute la page.

Il faut bien évidemment désactiver les sélections uniquement pendant le mouvement de la souris. Je pense même que pour le titre, tu peux aussi le faire dynamiquement, ce qui serait mieux (mais je n'ai pas vérifié).

Amicalement,

J'ai interrompu mes travaux sur MySQL pour faire la modif, qui semble marcher.
Voici ce que j'ai dû faire, car FireFox ne reconnait pas user-select directement (???)
En CSS

.unselectable {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

J'ai mis les 3 "béquilles" au cas où.
En Javascript:
pour mousedown sur l'objet "sensible" j'ai ajouté

document.body.classList.add('unselectable');

et j'ai ajouté document.body.classList.remove('unselectable'); dans le traitement de mouseup sur document.
Modifié par PapyJP (09 Jan 2019 - 11:06)