Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Comment empecher un label d'activer son element associe apres un drag and drop ?

9 réponses
Avatar
Laurent vilday
Bonjour,

Démo rapide de là ou j'en suis pour comprendre un peu de quoi je parle :)
http://mokhet.com/tests/prevent_label_drag.html
(INCOMPATIBLE IE, pas le temps et surtout pas l'envie de faire une page
de test pour cet âne)

soit la structure HTML :

<ul>
<li><input type="checkbox" id="xx"><label for="xx">lorem</label></li>
<li><input type="checkbox" id="yy"><label for="yy">ipsum</label></li>
</ul>

Structure sur laquelle je met une gestion de drag&drop pour pouvoir
déplacer les <li> les uns par rapports aux autres. Afin d'arriver au
résultat escompté, j'ai une structure très classique de drag&drop :

pour chaque li.onmousedown = on init le drag
document.onmousemove = traite le déplacement du drag
document.onmouseup = termine le drag

Pour éviter la sélection du texte lors du drag, on retourne false sur
li.onmousedown. Jusque là, tout va bien.

Là ou ça se complique, c'est que lorsqu'on relache le bouton de la
souris, si on avait initialisé le drag depuis le <label>, l'input
associé est alors activé (les cases à cocher en l'occurence). C'est ce
que je n'arrive pas à annuler, l'activation depuis le <label> après un drop.

J'ai essayé tout ce à quoi j'ai pu penser pour empêcher cette activation
après le drop (event.stopPropagation(), event.preventDefault() et return
false partout) mais rien n'y a fait. J'envoie cette bouteille dans
l'océan usenetien, au cas ou quelqu'un venait à connaitre ou à voir
quelque chose qui pourrait résoudre mon "problème".

Au pire, lors de l'initialisation du drag je finirais par sauvegarder la
valeur de l'input avant le drag et le replacerais après le drop. Mais
j'avoue que je préfèrerais une solution plus propre comme un
preventDefault().

Merci

PS : idiot que je suis, j'ai posté par erreur ce message sur fciwa.
Annulé aussitôt, prière d'utiliser ce message (dans fclj) si vous avez
des débuts de solution. Merci encore.

--
laurent

9 réponses

Avatar
YD
Bonjour,


Bonjour,

Démo rapide de là ou j'en suis pour comprendre un peu de quoi je parle :)
http://mokhet.com/tests/prevent_label_drag.html
[...]
Là ou ça se complique, c'est que lorsqu'on relache le bouton de la
souris, si on avait initialisé le drag depuis le <label>, l'input
associé est alors activé (les cases à cocher en l'occurence). C'est ce
que je n'arrive pas à annuler, l'activation depuis le <label> après un drop.
[...]


Tu te retrouves face à ce problème : comment modifier le gestionnaire de
l'évènement click alors que le clic est déjà initié. AMHA, pour être sûr de tout
maîtriser dans la page, il vaudrait mieux désactiver la gestion du click sur le
document, ou au moins sur le <ul>, et la gérer par script en considérant les
mouse down / up et l'existence d'un déplacement. La modif ajoute 3 ou 4 lignes à
ton script...

--
Y.D.

Avatar
ASM
Bonjour,

Démo rapide de là ou j'en suis pour comprendre un peu de quoi je parle :)


C'est toujours mieux quand on écrit ses problèmes, ainsi on arrive mieux
à comprendre ces derniers.

Maintenant que tu as compris, c'est donc impec(*).

http://mokhet.com/tests/prevent_label_drag.html
(INCOMPATIBLE IE, pas le temps et surtout pas l'envie de faire une page
de test pour cet âne)
... /...

Là ou ça se complique, c'est que lorsqu'on relache le bouton de la
souris, si on avait initialisé le drag depuis le <label>, l'input
associé est alors activé (les cases à cocher en l'occurence). C'est ce
que je n'arrive pas à annuler, l'activation depuis le <label> après un
drop.



(*) Puisque je ne suis pas arrivé à cocher les cases lors des D&D ...
;-)
Même depuis le label (texte)
Même depuis le li (bullet)
Même depuis la case
(Firefox 2 Mac)

Par contre petit blème avec Safari 1.3.2 :
- pas de D&D sur le li (le o)
- pas moyen de cliquer la case (checked) :-(


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles

Avatar
YD
(*) Puisque je ne suis pas arrivé à cocher les cases lors des D&D ...
;-)
Même depuis le label (texte)
Même depuis le li (bullet)
Même depuis la case
(Firefox 2 Mac)


Sois un peu plus délicat avec ta souris :
la case change d'état si, au moment du mouseup, ton pointeur de souris est
toujours au-dessus du <li>. Sinon, donc quand le mouseout a lieu avant le
mouseup, l'état ne change pas...

--
Y.D.

Avatar
ASM
(*) Puisque je ne suis pas arrivé à cocher les cases lors des D&D ...
;-)
Même depuis le label (texte)
Même depuis le li (bullet)
Même depuis la case
(Firefox 2 Mac)


Sois un peu plus délicat avec ta souris :


c a d que :

1) dès que ça passe en rouge
j'écarte le pointeur de façon à voir bien tout

2) il faut vraiment être bablè pour laisser son pointeur sur la case
et ensuite s'étonner qu'elle soit cochée lors du drop

3) je ne vois donc *aucun* disfonctionnement
(sauf avec Safari) (pas regardé avec Opera)


la case change d'état si, au moment du mouseup, ton pointeur de souris
est toujours au-dessus du <li>.


Il est forcément au dessus du li (truc rouge) et ... non, sauf à être
aussi sur le label et/ou sur la case : ça ne checkquotationne pas

Sinon, donc quand le mouseout a lieu
avant le mouseup, l'état ne change pas...


Faudra que tu m'esspliques comment tu fais un mouseout avant le mouseup
... ? ?(
Pas la peine : j'ai refais le test lentement.
en effet oui y a pb
(chapeau ce FF qui mouseout avant le mouseup alors qu'on est censé être
attaché au trucbidule)


Bon, maintenant, pour les maladroits
y a qu'à avoir un span à droite du label qui :
- recouvre l'ensemble du li
- prend la main à sa place pour la suite du D&D
ou :
- étend la zone
- avec autre couleur ?
- avec iconnette D&D
afin d'inciter à y mettre le pointeur
ou :
- au survol du li
- révèle imagette du span
- c'est le span qui assure le D&D


Au fait :
et si on avait un
cursor:pointer;
pour le li qui dépasse beaucoup à droite du label ?
et un
li {background:url(D_D.jpg) no-repeat left center; }
li:hover { background-position: right center; }
pour en profiter pour montrer l'icône du D&D


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
YD
Bon, maintenant, pour les maladroits [...]


J'avais justement parlé de 3 ou 4 lignes à ajouter, pas plus.
J'en ai trouvé le temps, si ça t'intéresse c'est là
http://ygda.free.fr/test/prevent_label_drag.html

Le principe : désactiver onclick sur la liste et gérer les
mousedown et mouseup pour vérifier s'il y a eu drag'n drop
ou clic.

--
Y.D.

Avatar
ASM
Bon, maintenant, pour les maladroits [...]


http://ygda.free.fr/test/prevent_label_drag.html


Ça marche impec !
et même Safari a retrouvé le click sur label et/ou case.

Le principe : désactiver onclick sur la liste et gérer les
mousedown et mouseup pour vérifier s'il y a eu drag'n drop
ou clic.


Par contre même si on clique en dehors du label apparent ça coche la
case ...


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé


Avatar
Laurent vilday
Bon, maintenant, pour les maladroits [...]


J'avais justement parlé de 3 ou 4 lignes à ajouter, pas plus.
J'en ai trouvé le temps, si ça t'intéresse c'est là
http://ygda.free.fr/test/prevent_label_drag.html

Le principe : désactiver onclick sur la liste et gérer les
mousedown et mouseup pour vérifier s'il y a eu drag'n drop
ou clic.


Oui, c'est à peu près ce à quoi je pensais en disant : "Au pire, lors de
l'initialisation du drag je finirais par sauvegarder la valeur de
l'input avant le drag et le replacerais après le drop."

Cependant, la manipulation consistant à désactiver le onclick du parent
(le <ul>) présente l'inconvénient *majeur*, dans la situation ou je me
trouve, d'empecher entre autre les events input.onchange de se produire.
Evenements qui ne sont pas toujours présents évidemment. Sans compter
sur le fait que, au delà de la mini page de démo, c'est pas toujours des
cases à cocher, j'ai malheureusement de temps en temps des boutons
radios et des <input type="text">. Pour les <input type="text">, la
désactivation des clicks sur le ul n'est pas génant, par contre pour les
boutons radios c'est assez problématique puisqu'on ne peut alors plus
faire de choix ni au clavier ni à la souris. sighh

J'ai donc pour l'instant abandonné l'idée d'utiliser l'attribut "for"
des <label> jusqu'à ce que surgisse une solution. Au pire cette fois si
on me demande de réintroduire le comportement d'un <label for="">, au
lieu d'utiliser l'attribut HTML je gérerais a la main le click sur le
label et tant pis. Ca me plait pas comme situation, c'est quand même
malheureux de devoir abandonner un attribut HTML existant si c'est pour
recréer le comportement en js. Mais bon au moins le "bug" dont on me
rabache les oreilles tous les jours depuis 3 semaines n'existe plus :)

--
laurent


Avatar
Laurent vilday
Sois un peu plus délicat avec ta souris :
1) dès que ça passe en rouge

j'écarte le pointeur de façon à voir bien tout


Ahh, si seulement ils faisaient tous comme ça. Mais non, mes users sont
des brutes.

2) il faut vraiment être bablè pour laisser son pointeur sur la case
et ensuite s'étonner qu'elle soit cochée lors du drop


Voila c'est exactement ce qu'ils (mes users) font. Et ils s'en
plaignent, donc oui ils sont presque tous "bablés" ( je connaissais pas
c'est mignon :p )

3) je ne vois donc *aucun* disfonctionnement
(sauf avec Safari) (pas regardé avec Opera)


Hurm, oui ok, c'était une démo rapide exprimant le concept de ce que
j'aimerais obtenir, pas un outils bullet proof qui marche partout.
D'ailleurs avec opera 9, ce "problème" ne se présente pas. Alors je sais
pas trop qui a raison.

Au fait :
et si on avait un
cursor:pointer;
pour le li qui dépasse beaucoup à droite du label ?
et un
li {background:url(D_D.jpg) no-repeat left center; }
li:hover { background-position: right center; }
pour en profiter pour montrer l'icône du D&D


lol, toujours pareil. Démo montée à la va vite sans mes librairies en
bien moins de temps qu'il ne m'a fallu pour rédiger et relire ces
messages. Alors oui, lol, esthétiquement parlant c'est pas top, mais
c'était pas le but non plus :D

--
laurent


Avatar
ASM
et si on avait un
cursor:pointer;
pour le li qui dépasse beaucoup à droite du label ?
et un
li {background:url(D_D.jpg) no-repeat left center; }
li:hover { background-position: right center; }
pour en profiter pour montrer l'icône du D&D


lol, toujours pareil. Démo montée à la va vite


Oui, bon, pour du à la va vite ok
mais ces css sont juste pour indiquer l'idée :
tenter d'attirer le pointeur là où ça ne gène pas

Mais ... bon ... je crois que c'est résolu ?

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé