[Réglé] Scriptaculous Sortable List

[Réglé] Scriptaculous Sortable List - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Réglé] Scriptaculous Sortable List (/showthread.php?tid=1480)

Pages : 1 2

RE: [réglé] Scriptaculous Sortable List - Mysterarts - 18-07-2007

Merci pour ce lien Naho !!
Je connaissais prototype.js depuis peu, et c'est vrai que ces genres de bibliothèques sont très pratique !
Je sens que ça va me servir !

Mysterarts

RE: [réglé] Scriptaculous Sortable List - Nessper - 31-07-2007

Bon je relance le topic car je me suis aperçu d'un petit problème que je suis incapable de résoudre. Parfois un élément se décale dans la liste et à partir de ce moment j'ai beau le déplacer, il reste décalé.

Donc si quelqu'un sait d'où cela peut venir, il m'en verra ravi.

ah oui j'oubliais voici mon code html

Code PHP :
<?php 

<div>

    <div id="gamb_act" class="bloc1">

        <h3>Gambits actifs</h3>

         <ol class="sortabledemo" id="firstlist">

               <li class="green" id="firstlist_firstlist1">Gambit n°14</li>

               <li class="green" id="firstlist_firstlist2">Gambit n°1</li>

               <li class="green" id="firstlist_firstlist3">Gambit n°11</li>

               <li class="green" id="firstlist_firstlist4">Gambit n°10</li>

               <li class="green" id="firstlist_firstlist5">Gambit n°15</li>

               <li class="green" id="firstlist_firstlist6">Gambit n°7</li>

               <li class="green" id="firstlist_firstlist7">Gambit n°21</li>

               <li class="green" id="firstlist_firstlist8">Gambit n°12</li>

         </ol>

    </div>

     <div id="gamb_pass"  class="bloc1">

         <h3>Gambits de réserve</h3>

         <ol class="sortabledemo" id="secondlist">

               <li class="orange" id="secondlist_secondlist1">

                 <span class="handle">Gambit n°9</span>

               </li>

               <li class="orange" id="secondlist_secondlist2">

                 <span class="handle">Gambit n°8</span>

               </li>

               <li class="orange" id="secondlist_secondlist3">

                 <span class="handle">Gambit n°0</span>

               </li>

               <li class="orange" id="secondlist_secondlist4">

                 <span class="handle"  >Gambit n°13</span>

               <li class="orange" id="secondlist_secondlist5">

                 <span class="handle">Gambit n°2</span>

               <li class="orange" id="secondlist_secondlist6">

                 <span class="handle">Gambit n°3</span>

               </li>

         </ol>

    </div>

</div>

 <script type="text/javascript">

          initSortables('firstlist', 'secondlist', 10);    

 </script>

et voici le javascript (c'est le code de Naholyr)

Code PHP :
<?php 

var sortablesState = 0;

function initSortables(liste1, liste2, max_obj) 

{

  // state = 0 => interdit

  // state = 1 => autorisé

  var nbActive = $(liste1).immediateDescendants().size();

  // si interdit et moins de 10 éléments, alors autoriser

  if (sortablesState == 0 && nbActive < max_obj) 

  {

    // supprimer les Sortables s'il y en a

    if (Sortable.options(liste1)) 

    {

      Sortable.destroy(liste1);

    }

    if (Sortable.options(liste2)) 

    {

      Sortable.destroy(liste2);

    }

    // Créer les sortables en autorisant les mouvements des deux côtés

    Sortable.create(liste1,

      {dropOnEmpty:true,containment:[liste1,liste2], constraint:false, onUpdate:function(){initSortables(liste1, liste2, max_obj)}});

    Sortable.create(liste2,

      {dropOnEmpty:true,handle:'handle',containment:[liste1,liste2],constraint:false});

    // Passer l'état à "autorisé"

    sortablesState = 1;

  }

  // si autorisé et au moins 10 éléments, alors interdire

  else if (sortablesState == 1 && nbActive >= max_obj) 

  {

    // Supprimer les Sortable

    Sortable.destroy(liste1);

    Sortable.destroy(liste2);

    // Créer les Sortable en limitant les mouvements

    Sortable.create(liste1, 

      {dropOnEmpty:true, containment:[liste1], constraint:false, onUpdate:function(){initSortables(liste1, liste2, max_obj)}});

    Sortable.create(liste2, 

      {dropOnEmpty:true, containment:[liste1,liste2], constraint:false});

    // Passer à l'état "interdit"

    sortablesState = 0;

  }

}

RE: [Déréglé] Scriptaculous Sortable List - naholyr - 31-07-2007

Avec quel navigateur ça te fait ça ? Je n'ai pas réussi à reproduire le bug

RE: [Déréglé] Scriptaculous Sortable List - Nessper - 16-08-2007

avec Firefox Sad

.
Il me semble qu'il faut d'abord que tu en mettes 10 à gauche, ensuite tu en prend un de gauche, tu le remets à droite et tu le remets tout de suite à gauche, et là il se décale.

[Edit] Hop deuxième bug que je viens de trouver : quand la liste de gauche est vide on ne peut plus en mettre, ce qui est quand même dommage

#######################################################################

[EDIT4] Je viens de trouver une solution au 1er bug énuméré. Tout le monde s'en branle mais bon, il y'en a peut-être un au fond de la salle que ça intéresse. Le bug semble venir de effect.js (j'ai la version 1.7.0 pour info). A la ligne 402, il y a un une fonction update. Au lieu de ça :

Code PHP :
<?php 

left: Math.round(this.options.x  * position + this.originalLeft) + 'px',

top:  Math.round(this.options.y  * position + this.originalTop)  + 'px' 

mettez ça :

Code PHP :
<?php 

left: '0px',

top:  '0px' 

Et voilà, le problème est résolu. ^^. Certes le 'retour' des éléments est moins élégant mais ça marche.

[EDIT 5] : Ouais j'ai trouvé la solution au 2ème problème ('fin pas moi, un pote ^^). Il suffit en fait de mettre un min-height > 0; pour les 2 listes.

Voilà. Si certains sont intéressés, qu'ils me fassent signe, je pense que je suis rodé maintenant ^^

RE: [Réglé] Scriptaculous Sortable List - elazard - 16-08-2007

Merci d'avoir donné tes solutions ca peut toujours servir^^