Discussion :

[Atomicfryer]

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>

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>

Maintenant le situations...
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.

[lili2704]

As-tu essayé de mettre deux styles différent à tes listes?
Il s'agit là juste d'une petite supposition, rien de sûr....

[danielhagnoul]

Bonjour.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#sortlist_un').sortable({
	opacity: 0.4,
	onchange: function(event, ui){
		// ...
	}
});
 
$('#sortlist_deux').sortable({
	opacity: 0.4,
	onchange: function(event, ui){
		// ...
	}
});

[Atomicfryer]

bonjour,

Non ce n'est pas liée au style...

danielhagnoul-> Que je rajoute l'UI ou pas Hum le problème reste entier !!

je rajoute ci-joint le script...

[Atomicfryer]

Bonjour,

je n'ai toujours pas de solution... ce que je n'arrive pas c'est a bloquer les éléments de la liste Une dans la liste Une et les éléments de la liste Deux dans la liste Deux... ça se mélange... Et JQuery n'est plus cohérent !!!

Avez vous déjà rencontré ce problème... Il y a visiblement quelque chose que je n'ai pas compris... (si vous connaissez une doc en français d'ailleurs...)