Bonjour à tous.

J'ai découvert depuis quelque temps la librairy jquery UI. J'ai donc lu de fond en comble la documentation de cette librairy.
J'ai donc essayé de mettre en place un système pour organiser mon menu.
Voici le menu de base

Rubrique 1
Rubrique 2
Rubrique 3
Rubrique 4

Pour organiser ce menu j'utilise l'attribut sortable:
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
 
$("#sortable").sortable(
		{
			placeholder: "ui-state-highlight",
			update : function (event, ui)
			{
				var list = ui.item.parent("ul");
				var pos = 0;
				$(list.find("li")).each(function()
				{
					pos++;
					$(this).find("input.positionInput").val(pos);
				});
			}
		});
et le code html qui fonctionne avec:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
<ul id="sortable">
<li>Rubrique 1</li>
<li>Rubrique 2</li>
<li>Rubrique 3</li>
<li>Rubrique 4</li>
</ul>
Sur une structure à un niveau, le code fonctionne très bien, par contre, sur une structure à 2 niveaux, je n'y arrive pas.
Cette structure est celle là.
Rubrique 1
sous Rubrique 1
sous Rubrique 2
Rubrique 2
sous Rubrique 3
sous Rubrique 4

Pour effectuer cette organisation, voici le code html permettant l'organisation de mon menu
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
 
<ul id="sortable">
    <li>Rubrique 1
         <ul class="sortable2">
             <li>sous Rubrique 1</li>
             <li>sous Rubrique 2</li>
         </ul>
    </li>
    <li>Rubrique 2
         <ul class="sortable2">
              <li>sous Rubrique 3</li>
              <li>sous Rubrique 4</li>
         </ul>
    </li>
</ul>
J'aimerais pouvoir organiser via le système sortable mon menu. En gros, j'aimerais pouvoir déplacer une sous rubrique d'une rubrique à une autre mais également déplacer et organiser les rubriques entre elle.

Le but est ensuite d'enregistrer dans la base de donnée mes rubriques et mes sous rubriques. Pour l'enregistrement, il s'agira de simple requete update.
Mais le problème est que malgré que le code js pour l'organisation que je veux, la numérotation des positions des rubriques et des sous rubriques foirent. Pour voir si la position des menus fonctionnent correctement, j'utilise les <input type="text" .... /> qui prenent la numérotation de la position.

Voici le code js que j'utilise actuellement:
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
 
		$("#sortable").sortable(
		{
			placeholder: "ui-state-highlight",
			update : function (event, ui)
			{
				var list = ui.item.parent("ul");
				var pos = 0;
				$(list.find("li")).each(function()
				{
					pos++;
					$(this).find("input.positionInput").val(pos);
				});
			}
		});
		$(".sortable2").sortable(
		{
			placeholder: "ui-state-highlight",
			connectWith: '.sortable2',
			update : function (event, ui)
			{
				var list = ui.item.parent("ul");
				var pos = 0;
				$(list.find("li")).each(function()
				{
					pos++;
					$(this).find("input.childpositionInput").val(pos);
				});
			}
		});
Je sais pas si vous avez compris quelque chose à mon charabiat, si vous voulez plus d'explication, n'hésitez pas.