Bonjour,
Pas forcément de gaité de coeur je rajoute une couche de Drag&Drop sur une appli utilisant mootools.
J'ai une liste d'éléments contenant des ancres (c'est important)
exemple idiot pour simplifier:
J'ai à côté de ça une sélection d'articles (une sorte de panier)
J'ai d'autres moyens plus simples d'ajouter un article à la sélection mais on m'a demandé du drag&drop en plus... En gros je veux pouvoir déplacer le texte "Article 1" vers la div "selection" et déclencher tout un tas d'actions que je maîtrise donc je ne m'étends pas dessus.
J'ai aussi comme contrainte de devoir travailler avec un "ghost" (c'est à dire que ce n'est pas directement l'article que je déplace, mais une copie générée à la volée. L'article reste où il était)
Le drag & drop avec mootools, de base ça se fait très bien. Sauf que je rencontre un problème à cause des ancres.
J'ai tenté plusieurs approches pour que les deux soient compatibles (qu'on puisse toujours cliquer sur le <a> tout en ayant le comportement voulu au niveau du drag&drop )
J'y arrive plus où moins mais ce n'est pas satisfaisant.
En effet, il faut cliquer très précisément (c'est à dire sans bouger d'un poil) pour ouvrir le lien. Sinon on passe dans le cas du Drag&Drop, le lien ne s'ouvre pas et on a un ghost dans les pattes qui nous gène pour retenter. Comportement énervant à l'usage (et je ne parle pas des problèmes d'accessibilité que ça pose)
Je veux donc modifier le comportement pour que le Drag&Drop s'active à partir d'un certain "snap" (par exemple 20px): En gros:
- si je "tremble" de moins de 20px alors aucun drag&drop ne s'active et on peut cliquer tranquillement.
- Si j'y vais franco et que je déplace l'élément de plus de 20px alors création du ghost, et tout ce qui va avec.
Pour faire cela, je tente de procéder en 2 temps:
1- Je rend mon article dragable (new Drag), avec un snap de 20.
2- Sur le onSnap: Je crée mon ghost, que je positionne, rend dragable & dropable (new Drag.Move)
C'est là que ça se complique et que je ne sais pas comment procéder.
Je voudrais que dans la foulée le ghost "prenne le relais", car en l'état j'ai beau avoir créé un ghost draggable, c'est toujours mon article initial qui est en cours de déplacement...
Je pense qu'il faut jouer sur la propagation d'événements mais je patauge un peu.
Bref! Si quelqu'un a une piste sur la manière de procéder...
Note: je suis ouvert à toute proposition sur la manière *globale* de procéder. Mon approche en deux temps n'est peut-être pas la bonne.
Modifié par saucissonsec (20 Oct 2010 - 16:32)
Pas forcément de gaité de coeur je rajoute une couche de Drag&Drop sur une appli utilisant mootools.
J'ai une liste d'éléments contenant des ancres (c'est important)
exemple idiot pour simplifier:
<div class="article"><a href="tralala.php?id=1">Article 1</a></div>J'ai à côté de ça une sélection d'articles (une sorte de panier)
<div class="selection"></div>J'ai d'autres moyens plus simples d'ajouter un article à la sélection mais on m'a demandé du drag&drop en plus... En gros je veux pouvoir déplacer le texte "Article 1" vers la div "selection" et déclencher tout un tas d'actions que je maîtrise donc je ne m'étends pas dessus.
J'ai aussi comme contrainte de devoir travailler avec un "ghost" (c'est à dire que ce n'est pas directement l'article que je déplace, mais une copie générée à la volée. L'article reste où il était)
Le drag & drop avec mootools, de base ça se fait très bien. Sauf que je rencontre un problème à cause des ancres.
J'ai tenté plusieurs approches pour que les deux soient compatibles (qu'on puisse toujours cliquer sur le <a> tout en ayant le comportement voulu au niveau du drag&drop )
J'y arrive plus où moins mais ce n'est pas satisfaisant.
En effet, il faut cliquer très précisément (c'est à dire sans bouger d'un poil) pour ouvrir le lien. Sinon on passe dans le cas du Drag&Drop, le lien ne s'ouvre pas et on a un ghost dans les pattes qui nous gène pour retenter. Comportement énervant à l'usage (et je ne parle pas des problèmes d'accessibilité que ça pose)
Je veux donc modifier le comportement pour que le Drag&Drop s'active à partir d'un certain "snap" (par exemple 20px): En gros:
- si je "tremble" de moins de 20px alors aucun drag&drop ne s'active et on peut cliquer tranquillement.
- Si j'y vais franco et que je déplace l'élément de plus de 20px alors création du ghost, et tout ce qui va avec.
Pour faire cela, je tente de procéder en 2 temps:
1- Je rend mon article dragable (new Drag), avec un snap de 20.
2- Sur le onSnap: Je crée mon ghost, que je positionne, rend dragable & dropable (new Drag.Move)
C'est là que ça se complique et que je ne sais pas comment procéder.
Je voudrais que dans la foulée le ghost "prenne le relais", car en l'état j'ai beau avoir créé un ghost draggable, c'est toujours mon article initial qui est en cours de déplacement...
Je pense qu'il faut jouer sur la propagation d'événements mais je patauge un peu.
Bref! Si quelqu'un a une piste sur la manière de procéder...
Note: je suis ouvert à toute proposition sur la manière *globale* de procéder. Mon approche en deux temps n'est peut-être pas la bonne.
Modifié par saucissonsec (20 Oct 2010 - 16:32)