Discussion :

[archeboc]

J'essaye de faire à la main un gestionnaire de Drag&Drop. Pour le moment, cela fonctionne seulement avec FireFox.

http://dcaig.free.fr/test/testDragAndDrop.html

J'ai réglé plusieurs effets de bord en jouant sur les "useCapture", sur les "preventDefault()" et sur les "return false" en fin de fonction de callBack.

Il me reste un détail gênant : lorsque je drague l'objet, je traîne une sélection temporaire du texte sur le fond de ma page ET dans mon objet dragable. C'est assez disgracieux, surtout si je mets des images.

Savez-vous comment résoudre ce problème ?

Archeboc

[archeboc]

Soyons plus précis. Lorsque je crée mon écouteur de déplacement, j'utilise la ligne suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.addEventListener(
              'mousemove', target.dd.modifiePosition, true);

pourquoi un écouteur sur le document ? Pourquoi est-ce que je ne le mets pas directement sur l'objet à déplacer ? Parce si je le mets directement sur l'objet à déplacer, lorsque ma souris sort de l'objet que je drague (à cause d'un ralentissement machine) il perd l'événement, et l'objet reste en rade derrière ma souris.

J'ai mis un paramètre useCapture=true. Cela signifie que mon callback est lancé AVANT la descente de l'événement vers le reste du document.

Par ailleurs, à la fin de mon callback (la fonction modifiePosition), j'ai mis à la fois un preventDefault(), un stopPropagation() et un "return false". Si avec tout cela l'événement arrive à amorcer la descente vers le reste du document, il s'appelle MacGyver.

Alors quoi ? Y aurait-il un autre événement qui est fired par le browser lorsque je déplace ma souris ?

Archeboc.

[javatwister]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.onmousedown=function(){return false}

[marcha]

J'ai mis un paramètre useCapture=true. Cela signifie que mon callback est lancé AVANT la descente de l'événement vers le reste du document.

Je trouve que ta phrase porte un petit peu à confusion, la capture
permet d'éviter que les gestionaires d'évènement associés à des éléments
enfants de celui qui capture ne soient appelés. (je sais pas si c'est ce que
tu entendais par descente de l'évènement)

La sélection est un traitement par défaut du navigateur, donc comme tu
l'as dit: preventDefault() semble être la bonne approche. Maintenant, la
sélection est le fait de mousedown et mousemove, peut-être que le
preventDefault sur le mousemove est pas suffisant. (cf. javatwister)

IE6 supporte pas la capture, mais tu n'en as pas besoin. (je sais pas si IE7 supporte)

Peux-tu poster un peu de code pour qu'on puisse tester ?

[bigboomshakala]

je te propose une rustine

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//variable globale
var saveSelectionStart = document.onselectstart;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
this.modifiePosition = function(evt){
   document.onselectstart=function(){ return false; };
   ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
this.lacheDD = function(evt){
   document.onselectstart=saveSelectionStart;
   ...

ça supprime ton problème d'affichage disgracieux

[archeboc]

Avant de cliquer sur le fameux bouton "résolu", est-ce que quelqu'un pourrait m'expliquer la différence entre "return false" et "preventDefault".

Ce que je comprends, c'est que même si, avec "return false", on bloque l'événement dans la phase de capture, avant qu'il ne touche la cible, ce bloquage ne concerne que les callbacks de mon script, et pas ceux attachés par défaut par le navigateur.

Sous FF, lorsqu'on fait un drag&Drop sur une image (ex : le bandeau developpez.com du haut de cette page), une icone "interdit" apparaît. Ce comportement par défaut est extrèmement gênant si on veut faire un vrai Drag & Drop, et le "return false" ne suffit pas à le désactiver.

Je suis preneur de tout élément qui justifie cette observation, et qui explique la différence de fond entre "preventDefault" et "return false".

Archeboc.