Discussion :

[Maximus32]

Salut à tous,

J'utilise la librairie AJAX de http://script.aculo.us, pour gérer des listes d'éléments triables.
Exemple ici : http://wiki.script.aculo.us/scriptac...tableListsDemo

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul id="colstructure" class="struct">
	<li id="colstructure_colstructuretxt"><div class="drag_drop"><img src="/pix/ico_txt.png"></div></li>
	<li id="colstructure_colstructuretab"><div class="drag_drop"><img src="/pix/ico_tab.png"></div></li>
	<li id="colstructure_colstructureimg"><div class="drag_drop"><img src="/pix/ico_img.png"></div></li>
</ul>
 
<ul id="colcentre" class="struct">
	<li id="colcentre_colcentretxt"><div class="drag_drop"><img src="/pix/ico_txt.png"></div></li>
	<li id="colcentre_colcentretab"><div class="drag_drop"><img src="/pix/ico_tab.png"></div></li>
	<li id="colcentre_colcentreimg"><div class="drag_drop"><img src="/pix/ico_img.png"></div></li>
</ul>

J'ai la possibilité de faire passer les éléments d'une liste à l'autre grace à la classe javascript Sortable.
Je déclare les listes ainsi :

Code :

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

1
2
3
4
5
 
<script type="text/javascript">
	Sortable.create("colcentre", {dropOnEmpty:false,handle:'drag_drop',containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}});
	Sortable.create("colstructure", {dropOnEmpty:false,handle:'drag_drop', containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}});	
</script>

Je souhaiterai que si l'on déplace un élément d'une liste à l'autre, dans la liste de départ l'élément transféré soit recréé.
Celà ne serait plus un déplacement d'élément d'une liste à l'autre mais une copie d'élément d'une liste à l'autre.

Pour celà, lorsque que déplace un élément d'une liste à l'autre, j'appelle la fonction updateStructure() qui lance une requête XmlHttpRequest qui va recréer le contenu de ma liste de départ de la manière suivante :
(la langage de l'application est JSP)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
out.print(" document.getElementById('colstructure').innerHTML='");
out.print("<li id=\"colstructure_colstructuretxt\">");
out.print("  <div class=\"drag_drop\"><img src=\"/pix/ico_txt.png\"></div>");
out.print("</li>");
out.print("<li id=\"colstructure_colstructuretab\">");
out.print("  <div class=\"drag_drop\"><img src=\"/pix/ico_tab.png\"></div>");
out.print("</li>");
out.print("<li id=\"colstructure_colstructureimg\">");
out.print("  <div class=\"drag_drop\"><img src=\"/pix/ico_img.png\"></div>");
out.print("</li>';");

Mon problème est que l'élément déplacé n'a pas changé d'id, il se nomme toujours (par exemple) <li id="colstructure_colstructuretxt">.
La structure du nom est importante dans mon cas : "Id de la liste auquel il appartient"_"chaine sans importance".

Donc ma méthode qui consiste à récréer la liste de départ, ne me permet plus de déplacer aucun éléments par la suite, car je me retrouve avec deux élément avec le meme ID.

Est-il possible de renommer l'id d'un élément une fois qu'il a été déplacé ?

Avez vous une autre solution ou un autre axe de recherche à mon problème ??

[siddh]

pourquoi ne passes tu pas un argument a updateStructure que tu rajouteras a l'id dans ta page jsp ?

sinon peut etre avec un :

Code :

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

document.getElementById('unid').id='unautreid';

[Maximus32]

Ok, je vais tester ça tout de suite. Je vous tiens au courrant !!

Merci.

[Maximus32]

J'ai utilisé :

Code :

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

document.getElementById('unid').id='unautreid';

pour renommer l'id de mon élément et ça fonctionne très bien !

De plus, j'avais oublié de détruire mes listes avant de les recréer :

Destuction des listes :

Code :

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

1
2
Sortable.destroy("colcentre");
Sortable.destroy("colstructure");

Re-création des listes :

Code :

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

1
2
Sortable.create("colcentre", {dropOnEmpty:false,handle:'drag_drop',containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}});
   Sortable.create("colstructure", {dropOnEmpty:false,handle:'drag_drop', containment:["colcentre","colstructure"], constraint:false, onChange:function(){updateStructure()}});

Encore merci pour tout !!! Je commençais à m'arracher les cheveux !!