Utiliser destroy() sur des Draggable

Version imprimable

Bonjour à tous.

Je vous explique la situation.
J'ai plusieurs balises LI dans ma page que je définis comme Draggable.
Sur un certain évènement, notamment onDrop d'un Droppable de ma page, je voudrais "détruire" le Draggable de telle sorte à ne plus pouvoir le bouger.
Si encore je voulais le détruire sur un évènement propre au Draggable, pas de problème, un simple this.destroy() ferait l'affaire (j'ai testé ça fonctionne) mais là je ne suis plus dans le Draggable, d'ou l'idée de mettre mes Draggable dans un tableau afin de pouvoir les identifier

J'ai essayé la méthode suivante:
_je définis un tableau en global
_au moment de ma déclaration de mes Draggable, je fais ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var DragLc = new Array(); DragLc[0] = new Array(); DragLc[1] = new Array(); for (i=0;i<listeLi.length;i++){ DragLc[i][0] = new Draggable( listeLi[i], { revert:true } ); DragLc[i][1] = listeLi[i].id; }
En première colonne du tableau, je mets le Draggable et en deuxième une info quelconque.

J'y croyais pas mal à ce truc mais le souci est que ça ne fonctionne pas.. :?

Quelqu'un a-t-il une idée pour me débloquer..?
Bonne journée

Pour info, lorsque que je drag un Draggable n'importe ou, FireBug me dit ça :

DragLc[i] has no properties
[Break on this error] revert:true

L'erreur dont il parle est ici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var DragLc = new Array(); DragLc[0] = new Array(); DragLc[1] = new Array(); for (i=0;i<listeLi.length;i++){ DragLc[i][0] = new Draggable( listeLi[i], { revert:true } ); DragLc[i][1] = listeLi[i].id; }

07/05/2008, 12h17
thibane

Quelqu'un n'a pas une petite idée..? :?
11/05/2008, 02h34
thibane

J'avais pensé à changer dynamiquement la class du draggable au moment du drop en me disant, après il me suffit de remettre à jour la liste et c'est réglé.
Sauf que ça aurait marché avec un Sortable et pas des draggable, puisque il y a un attribut "only" dans les sortable, qui permet de dire, c'est seulement CETTE classe qui sera déplaçable. Malheureusement, cet attribut n'existe pas pour un Draggable..
(mais du coup si qqun a besoin de désactivé un draggable qui faisait parti d'un sortable, mntnt il a une sérieuse piste.. ;) )

Moi j'en suis donc toujours au même point, je cherche une solution..

Je viens de trouver :yaisse2:

Je mets un code d'exemple pour ceux que ça intéresserait.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv="Content-Type" content='text/html; charset=UTF-8' /> <script src="prototype.js" type="text/javascript" charset="utf-8"></script> <script src="scriptaculous.js" type="text/javascript" charset="utf-8"></script> <title>Exemple d'utilisation de la méthode destroy</title> </head> <body> <ul id='liste' style="float:left;"> <li id="L_1" class='sortable'> <span class="handle">Liste1:</span> <ul> <li id="L_1_1" class="sortable"><span class="handle">Element1.1</span></li> <li id="L_1_2" class="sortable"><span class="handle">Element1.2</span></li> <li id="L_1_3" class="sortable"><span class="handle">Element1.3</span></li> </ul> </li> </ul> <input type="button" value="Destroy() sur 'Element1.2'" onClick="supp();" /> </body> </html> <script type="text/javascript"> var test = new Array(); test[0] = new Array(); test[1] = new Array(); </script> <script type="text/javascript"> // <![CDATA[ function setDrag(){ listeLi = document.getElementById('liste').getElementsByTagName('li'); for (i=0;i<listeLi.length;i++){ test[0].push(new Draggable( listeLi[i], { revert:true, handle:"handle" } )); test[1].push(listeLi[i]); } } setDrag(); function supp(){ test[0][2].destroy(); } // ]]> </script>
Donc pour ceux qui ont suivi, merci la méthode push :)

Et du coup, ça ouvre de nouvelles portes. C'est donc tout à fait possible par exemple, d'appliquer la méthode destroy() sur plusieurs éléments qui auraient des relations entre eux. Et oui puisque maintenant tous les draggables de la page peuvent être stockés dans des tableaux alors ont peut faire x recherches dans ces tableaux...
Enfin je vous laisse imaginer les utilisations..

Allez bon weekend ;)

PS: pour ceux qui veulent tester le code et qui n'y connaissent pas grand chose à scriptaculous, si vous voulez que ça fonctionne, téléchargez la dernière version de scriptaculous et mettez les script js que vous voyez inclus en haut du code dans le même répertoire que votre html.

11/05/2008, 14h28
Sacha999

Fais nous une page de test très succinte pour qu'on puisse experimenter dessus
EDIT: J'ai rien dit, cool tout est bien qui fini bien

A la place des push, la maniere traditionnel fonctionnait aussi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
for (i=0;i<listeLi.length;i++){
			test[0][i] = new Draggable(
						listeLi[i], 
						{
							revert:true,
							handle:"handle"
						}
					);
			test[1][i] = listeLi[i];
 
		}

11/05/2008, 15h49
thibane

Tout à fait monsieur. :D