Discussion :

[thibane]

Bonjour à tous,

Je galère sur un problème de Drag and Drop avec les Sortable avec la librairie Scriptaculous.

J'ai découvert des choses intéressantes. Notamment que sur l'évènement onUpdate (resp onChange), on peut connaitre l'id du conteneur source (resp l'id de l'item qu'on est en train de dropper.

***********************************
ex1 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
onUpdate: SortableLists.updated,
...
 
var SortableLists = {
 
...
 
updated: function (list) {
        alert(list.id); //affiche l'id de la liste d'ou vient l'item droppé
}
 
...
}

************************************
ex2 :

Code :

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

1
2
3
4
5
6
7
8
var SortableLists = {
...
onChange : SortableLists.test,
...
test: function (element) {
        alert(element.id); //affiche l'id de l'item droppé
...
}

Mais ça l'affiche un nombre impressionnant de fois. Normal puisque l'évènement onChange intervient à chaque fois qu'il y a modification dans l'ordre d'une liste, c'est à dire énornément de fois lorsqu'on bouge d'une liste de 12 élément à une autre de 20éléments..

************************************

Je vous explique rapidement ce que je dois faire:

1) Je peux bouger un élément "li" ou "ul" d'une liste à une autre.
2) Quand je drag&drop un élemen ("li" ou "ul"), je dois enregistrer plusieurs informations (comme l'id de l'élément droppé, l'id du conteneur source, l'id du conteneur destination)(en les insérant dans un array par exemple) et ensuite, je dois toujours conserver l'élément droppé dans le conteneur source (la liste "ul" de départ donc) mais avec une couleur de fond différente, ce qui montrera que l'élément a bien été bougé qqpart. Cela implique donc bien que je sache d'une manière ou d'une autre l'id de l'élément que je bouge car j'en ai besoin à plusieurs reprises.
3) Enfin, quand l'utilisateur clique sur un bouton submit, je dois appeler plusieurs actions struts corresponsdant à toutes les entrées que j'aurai dans mon array. C'est à dire qu'à chaque fois que l'utilisateur bougera un élément qqpart, il y a une opération sur des tables à effectuer derrière, donc c'est de cette manière que j'ai choisi de traduire les opérations à effectuer en base : en stockant les informations dans un array que je devrai parser à la fin.

Ca parait peutetre méchant comme ça mais ça l'est pas.

J'arrive à insérer une ligne dans un array sur l'évènement onUpdate mais par contre, j'arrive pas à mettre dans cette ligne les informations qui m'intéressent, à savoir les id que je vous ai cités plus haut.

Quelqu'un peut me filer un coup de main?

[DoubleU]

De mémoire, le premier argument passé au callback sur onChange et onUpdate c'est l'élément droppé, donc tu peux récupérer son id.

Edit: arf, semblerait que pour onUpdate ca soit le container, j'ai rien dit donc. Faut que tu récupères l'élément bougé pendant le onChange alors.

[thibane]

Ok mais le problème c'est quand j'utilise onChange, je vais récupérer mon id 2500fois entre le moment ou clique sur mon item pour le bouger et le moment ou je le dépose dans un container.
J'ai un peu de mal à voir comment faire pour juste le récupérer une fois et lancer un traitement derrière en fait..

Suis-je clair..?

[DoubleU]

Tu le mets a chaque fois dans une variable globale que tu récupères sur le onUpdate, c'est pas très beau mais a défaut de mieux...

[thibane]

Clair qu'il doit y avoir moins violent mais ça a le mérite de débloquer mon dev et pour cela, je t'en remercie chaleureusement.

Je laisse volontairement le problème "non résolu" car si qqun trouve une explication claire qqpart sur le net, ça serait cool de la partager

[thibane]

Bonjour à tous.

J'arrive mntnt à récupérer l'id de l'élément que j'ai droppé ainsi que la liste de destination.
(je vous mets les solution en fin de journée)

Il ne me manque plus que l'id de la liste de départ!

Sur mon évènement onUpdate (qui prend en paramètre le sortable, lequel j'en sais rien (entre celui de départ ou d'arrivée..), j'ai une fonction qui récupère l'id du sortable passé en paramètre.
Ce qui est bizarre, c'est que l'id de la liste de départ change tout le temps.
-> Qd je déplace un élément de la liste 1 dans la liste 1, j'ai bien l'id de la liste 1
-> Qd je déplace un élément de la liste 2 dans la liste 2, j'ai bien l'id de la liste 2
-> Qd je déplace un élément de la liste 2 vers la liste 1, j'ai bien l'id de la liste 2
-> Et qd je déplace un élément de la liste 1 vers la liste 2, j'ai toujours l'id de la liste 2! A n'y rien comprendre!

J'ai vu que l'évènement onUpdate était appelé 2 fois, une fois pour chaque liste, celle de départ et d'arrivée.
Mais alors comment faire pour récupérer l'id de la liste de départ???

[thibane]

Salut,

Je me permets de relancer le problème..

Je rappelle le problème pour ceux qui aurait oublié, j'ai besoin de connaître l'id de la liste de départ qd je drag un objet d'une liste à une autre. Actuellement, je connais l'id de l'élément droppé et l'id de la liste d'arrivée..

Merci à vous

[thibane]

Voilà comment je m'en suis sorti.

L'astuce, qui n'est pas décrite dans les docs de scriptaculous (si on peut appeler ça des docs d'ailleurs..), c'est qu'il existe d'autres options pour les Sortable : starteffect et endeffect. (pour info, je les ai trouvées en parcourant le fichier dragdrop.js de scriptaculous..)

Voici un exemple d'utilisation de ces options :

Dans votre code HTML, apres votre liste UL, mettez des div de DEBUG :

Code :

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

1
2
3
<div id="start"></div>
<div id="end"></div>
<div id="elmnt"></div>

Dans votre javascript :

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
 
var itemBeingDragged;
var liste;
 
Sortable.create(
    'liste1',
    {
		dropOnEmpty: true,
		containment: ['liste1','liste2'],
		constraint: false,
		only: 'sortable',
		starteffect: function(element){
			itemBeingDragged = element;
			liste = element.parentNode;
			$('start').innerHTML="liste d'origine: " + liste.id;
			$('elmnt').innerHTML="element: " + element.id;
		},		
                endeffect: function(element){
			itemBeingDragged = element;
			liste = element.parentNode;
			$('end').innerHTML="liste d'arrivée: " + liste.id ;
			$('elmnt').innerHTML="element: " + element.id;
		}
     }
   );

Ne retenez ici que l'utilisation de starteffect et endeffect. Ces deux options prennent le draggable en paramètre.
Donc dans le div "elmnt", vous verrez l'id du draggable que vous en train de déplacer.
Dans le div "start", l'id de la liste de départ et dans le div "end", l'id de la liste d'arrivée.

Voici donc une manière d'obtenir ces ID avec les Sortable.

Moi maintenant, j'ai changé de tactique et j'utilise uniquement des Draggable et des Droppable.
De cette manière :

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
listeLi = document.getElementById('liste').getElementsByTagName('li');
for (i=0;i<listeLi.length;i++){
	new Draggable(
			listeLi[i], 
			{
				revert:true,
				handle:"handle"
			}
		);
} 
 
Droppables.add(
		listesDrop,
		{	
			hoverclass: 'hoverClassPartie2',
			accept: 'sortable',
			onDrop: function test(element,drop){	
				alert("valeur = "+element.id);					
				ajouter(element,drop);
			}
		}
);

Donc je n'utilise aucune option starteffect ou endeffect (qui pourtant existent aussi chez les Draggable) mais l'option des Droppable "onDrop" qui prend en arguments le Draggable qui est lâché dans le Droppable et le Droppable lui-même (et en bonus un troisième argument Event dont il faut qu'on m'explique l'utilisation...).
A partir de là, vous pouvez accéder à toutes les propriétés du Draggable et du Droppable que vous voulez.

Là par exemple, j'utilise un "alert" pour afficher l'id de l'élément que je viens de déposer puis une fonction ajouter qui va, comment vous vous en doutez, ajouter le Draggable au Droppable (car ça ne se fait pas tout seul, et non.. )

Voili voulou

PS: par rapport au premier post, un certain temps s'est écoulé. Entre temps, j'ai laissé tombé l'écriture en JSON (style choisi par la personne d'ou j'ai pris le tuto) et je suis revenu à un style plus classique pour un peu plus de clarté, enfin ça c'est une histoire de point de vue..

[superdam]

Ta solution est bonne car tu obtiens directement des Draggable et des Droppable et donc toutes les propriétés interessantes...
Mais ce qui m'interesse moi, c'est de conserver les propriétés des Sortables : je veux que mes éléments se classent les uns entre les autres etc...

Comment fais tu cela 'simplement' avec seulement des Drag et des Drop'... ?! Ce n'est pas trop fastidieux ?

Merci de vos réponses

[thibane]

Bonjour superdam,

peux-tu décrire un peu plus précisément ce que tu veux faire?