UI Sortable. Comment synchroniser deux listes ?

**quent.** · 27/03/2010, 14h25

en gros je cherche à synchroniser l'ordre de deux listes avec jquery_ui.

si je modifie l'ordre d'une liste, l'ordre de l'autre doit se modifier aussi.

avec serialize j'ai un array de ma liste modifié mais que faire pour modifier l'autre avec ça ??
je suis en train de cramer toute mes neurones !!

si qqu'un a une idée ??

merci.

**quent.** · 27/03/2010, 21h36

pour plus de précisions:

en gros la premiere liste est le contenue de du site (série de div sortable) ou chaque div contient une fenetre
la deuxieme liste est la liste des titres des divs ouvertes... elle permet de recupérer une div facilement et la faire remonter par exemple...
pour l'exemple mon code simplifié (mais helas le jquery ne fais rien à part rendre les liste "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
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
 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>test sortable</title>  
 
<style>  
body{position:fixed;overflow:hidden;} 
#menu_gauche{position:fixed;border:solid 1px #F00;top:50px;left:10px;overflow:hidden;width:200px;bottom:10px;} 
#fenetres{position:fixed;top:50px;left:220px;right:10px;bottom:10px;border:solid 1px #F00;overflow:auto;} 
.fenetre{margin:30px;height:300px;border:solid 1px #00F;} 
</style>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>  
<script>  
  $(document).ready(function() { 
    $("#fenetres").sortable({ axis: 'y' }); 
        $("#titre").sortable({ axis: 'y' },{ placeholder: 'ui-state-highlight' }); 
  }); 
</script>  
</head>  
 
<body>  
    <div id="menu_gauche">  
        <ul id="titre">  
                <li>titre1</li>  
            <li>titre2</li>  
            <li>titre3</li>  
            <li>titre4</li>  
            <li>titre5</li>  
            <li>titre6</li>  
        </ul>  
    </div>  
    <div id="fenetres">  
        <div class="fenetre" id="fenetre1">1</div>  
        <div class="fenetre" id="fenetre2">2</div>  
        <div class="fenetre" id="fenetre3">3</div>  
        <div class="fenetre" id="fenetre4">4</div>  
        <div class="fenetre" id="fenetre5">5</div>  
        <div class="fenetre" id="fenetre6">6</div>  
    </div>  
 </body>  
</html>

donc voilà mais je voudrais pas en arriver à une solution coté serveur ou je refais carrément ma liste dans un autre ordre...

merci pour vos idées !

**danielhagnoul** · 27/03/2010, 23h01

Bonsoir.

Envoyé par quent.

[...] je suis en train de cramer toute mes neurones !

Et mes neurones en supplément !

Poser la question n'était sans doute pas trop difficile, mais pour résoudre le problème cela m'a pris deux heures, au moins, avant d'arriver à quelque chose de correct. Mais j'ai eu un bon coup de main de mon copain Firebug

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui-1.8/css/humanity/jquery-ui-1.8.custom.css">	
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#sortable1, #sortable2 {
			float:left;
			list-style-type: none;
			margin: 0 24px 0 0;
			padding: 0;
			width: 200px;
		}
		#sortable1 li, #sortable2 li {
			margin: 0 3px 3px 3px;
			padding: 0.4em;
			padding-left: 1.5em;
			font-size: 1.4em;
			height: 18px;
		}
		#sortable1 li span, #sortable2 li span {
			position: absolute;
			margin-left: -1.3em;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-ui-1.8.custom.min.js"></script>
	<script>
/*
 * je cherche à synchroniser l'ordre de deux listes avec jquery_ui.
 * si je modifie l'ordre d'une liste, l'ordre de l'autre doit se modifier aussi.
*/
		$(function(){
			$("#sortable1").sortable({
				update: function(event, ui) {
					var nb = ui.item[0].id.slice(3);
					var s1Array = [];
					var s2Array = [];
 
					$("li", this).each(function(i, item){
						s1Array.push(item.id.slice(3));
					});
 
					$("#sortable2 li").each(function(i, item){
						s2Array.push(item.id.slice(3));
					});
 
					var s1Pos = $.inArray(nb, s1Array);
					var s2Pos = $.inArray(nb, s2Array);
 
					$("#sortable2 li:eq(" + s2Pos + ")")
						.remove()
						.insertBefore("#sortable2 li:eq(" + s1Pos + ")");
				}
			});
 
			$("#sortable2").sortable({
				update: function(event, ui) {
					var nb = ui.item[0].id.slice(3);
					var s2Array = [];
					var s1Array = [];
 
					$("li", this).each(function(i, item){
						s2Array.push(item.id.slice(3));
					});
 
					$("#sortable1 li").each(function(i, item){
						s1Array.push(item.id.slice(3));
					});
 
					var s2Pos = $.inArray(nb, s2Array);
					var s1Pos = $.inArray(nb, s1Array);
 
					$("#sortable1 li:eq(" + s1Pos + ")")
						.remove()
						.insertBefore("#sortable1 li:eq(" + s2Pos + ")");
				}
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul id="sortable1">
			<li id="li10" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
			<li id="li11" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
			<li id="li12" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
			<li id="li13" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
			<li id="li14" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
			<li id="li15" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 15</li>
			<li id="li16" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 16</li>
		</ul>		
 
		<ul id="sortable2">
			<li id="li20" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 20</li>
			<li id="li21" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 21</li>
			<li id="li22" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 22</li>
			<li id="li23" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 23</li>
			<li id="li24" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 24</li>
			<li id="li25" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 25</li>
			<li id="li26" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 26</li>
		</ul>		
 
		<p style="clear:both;">Un mot pour remplir</p>
	</div>
</body>  
</html>