Utiliser destroy() sur des Draggable

**thibane** · 07/05/2008, 07h57

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 :

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

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

**thibane** · 07/05/2008, 08h10

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 :

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

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;
	}

**thibane** · 07/05/2008, 12h17

Quelqu'un n'a pas une petite idée..?

**thibane** · 11/05/2008, 02h34

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..

**thibane** · 11/05/2008, 14h10

Je viens de trouver

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

Code :

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

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.

**Sacha999** · 11/05/2008, 14h28

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

**Sacha999** · 11/05/2008, 14h48

A la place des push, la maniere traditionnel fonctionnait aussi

Code :

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

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];
 
		}

**thibane** · 11/05/2008, 15h49

Tout à fait monsieur.

Utiliser destroy() sur des Draggable [script.aculo.us]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager