11548 sujets

JavaScript, DOM et API Web HTML5

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és.

Je vous montre les bouts de codes nécessaire pour comprendre mon souci :
Code html :

<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 :

<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 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...)

d'avance merci.
Salut,

je n'arrive pas à reproduire le problème de mon côté : chaque tri est lié à une et une seule liste. D'ailleurs d'après la doc de jQuery UI on ne peut connecter deux listes qu'en utilisant connectWith . Smiley hmm

A noter que pour mes tests il m'a fallu remplacer Sortable par sortable.
Ha en effet... humm j'en deduit donc que c'est du au version du JQuery que je charge...