Bonjour à tous...
je suis entrain de faire un Back Office, et j'ai besoin de faire plusieurs tris de listes séparées. Je suis pour l'instant entrain de faire des tests de Sortable avec JQuery et je suis face a quelques petites difficultées.
Je vous montre les bouts de codes necessaire pour comprendre mon souci :
Code html : 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="sortlist_un" class="ul_style"> <li id="votre_id_1" class="item">item 1</li> <li id="votre_id_2" class="item">item 2</li> <li id="votre_id_3" class="item">item 3</li> <li id="votre_id_4" class="item">item 4</li> <li id="votre_id_5" class="item">item 5</li> <li id="votre_id_6" class="item">item 6</li> <li id="votre_id_7" class="item">item 7</li> </ul> <ul id="sortlist_deux" class="ul_style"> <li id="votre_id_1" class="item">item 1</li> <li id="votre_id_2" class="item">item 2</li> <li id="votre_id_3" class="item">item 3</li> <li id="votre_id_4" class="item">item 4</li> </ul>Maintenant le situations...
Code javascript : 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 <script type="text/javascript"> $(document).ready( function(){ $('#sortlist_un').Sortable({ accept : 'item', axis: 'vertically', opacity: 0.4, containment : '#sortlist_un', helperclass: 'sortHelper', onchange : function (sorted) { serial = $.SortSerialize('sortlist_un'); $.ajax({ url: 'set_position.php', type: 'post', data: serial.hash, //complete: function(data){alert(serial.hash);}, success: function(feedback){ $('#data').html(feedback);}, error: function(){alert('Erreur lors du déplacement !');} }); } }); }); </script> <script type="text/javascript"> $(document).ready( function(){ $('#sortlist_deux').Sortable({ accept : 'item', axis: 'vertically', opacity: 0.4, containment : '#sortlist_deux', helperclass: 'sortHelper', onchange : function (sorted) { serial = $.SortSerialize('sortlist_deux'); $.ajax({ url: 'set_position.php', type: 'post', data: serial.hash, //complete: function(data){alert(serial.hash);}, success: function(feedback){ $('#data').html(feedback);}, error: function(){alert('Erreur lors du déplacement !');} }); } }); }); </script>
Situation 1 : 1 script et une liste : ça marche nickel !!
Situation 2 : 2 scripts et deux listes : ça marche mais les listes se mélange.
Situation 3 : Idem situation 2 + la restriction containement:'parent' alors la c'est le bug... les listes font un peu ce qu'elles veulent !!
je suis un peu a court d'imagination aujourd'hui alors si vous avez déjà rencontré ce cas... je serais preneur de votre avis.
d'avance merci.
Partager