Bonjour,

J'ai récupéré sur la bibliothèque JQUERY, avec un peu d'amélioration.
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
              <script>
                  $( function() {
                      let dataSort={
                          connectWith: ".connectedSortable{{ connectId }}",
                          cursor:"move",
                          helper: "clone",
                          revert: true,
                          zIndex: 9999,
                          receive: function(event, ui) {
                              // so if > 10
                              if ($(this).closest('.listMembre').length<1 && $(this).children().length > 10) {
                                  //ui.sender: will cancel the change.
                                  //Useful in the 'receive' callback.
                                  $(ui.sender).sortable('cancel');
                              }
                          }
                      };
                      $( ".connectedSortable{{ connectId }}" ).sortable(dataSort);
 
                  } );
              </script>
Ma question est la suivante :

J'ai réussie à faire fonctionner le sortable, mais quand j'actualise je n'arrive pas à garder l'élément dans une autre <li>


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
16
17
18
19
20
21
22
23
24
25
26
27
           <div class="contentGroupe">
                <div class="groupe listMembre">
                  <h3>Liste des membres</h3>
                  <div class="ulGroupe " >
                    <ul class="connectedSortable{{ loop.index }}">
 
                      {% for valeur in pseudo %}
                        <li class="ui-state-default {{ valeur.reponse }} {{ valeur.classe|lower|replace({' ':'_', "'":'_'}) }}">
                          {{ valeur.pseudo|raw }}
                        </li>
                      {% endfor %}
 
                    </ul>
                  </div>
                </div>
 
                  {% set nbPseudo=pseudo|length // 10 +1 %}
                  {% for i in 1..nbPseudo %}
                    <div class="groupe">
                      <h3>Groupe {{ loop.index }}</h3>
                      <div class="ulGroupe">
                        <ul class="connectedSortable{{ connectId }}">
                        </ul>
                      </div>
                    </div>
                  {% endfor %}
              </div>

Pour être plus claire, je créai un <ul> avec des <li>"cette colonne liste des participant" dans ce bloc je récupère tous les pseudo.

Une fois récupérée je créai des groupes 1, 2, ...

Dans le premier <ul>, <li> là je récupère les pseudo je déplace les joueurs dans un groupe 1, 2 et ,..., jusqu'à là tous fonctionne.

Sauf que quand j'actualise la page les personnes que j'ai déplacés dans le groupe 1,2,..., tous revient dans le <ul>, <li> d'origine.
Je bloque je suis sur que sur leurs pages il y a la solution mais moi et l'anglais fais 2.

http://api.jqueryui.com/sortable/#option-appendTo

Merci d'avance pour votre aide. A oui {% %} c'est du moteur Template twig.

Ps: je vous joins également le php qui va avec.

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
if((int)$post['id']<=0){
      exit('id incorrect');
    }
    $event=$this->db->query('SELECT titre FROM evenements WHERE id=?', [(int)$post['id']])->fetch();
    if(!Tools::displayIfPropertyExist($event, 'titre')){
      exit("l'évenement existe pas !!!");
    }
    $titre=$event->titre;
    $participants = $this->db->query("SELECT r.*, g.classe FROM evenements_reponse r INNER JOIN guilde g ON g.pseudo = r.pseudo WHERE r.idEvenement=?", [(int)$post['id']])->fetchAll();
 
    if(empty($participants) or !is_array($participants)){
      exit('Impossible de récupérer les informations de la base de données.');
    }
 
    $events= array();
    $eventsNons= array();
    foreach ($participants as $key=>$participant){
      $participants_boucles = json_decode($participant->reponse, true);
      foreach($participants_boucles as $date_event => $reponse) {
        if(in_array(strtolower($reponse), array('oui', 'x'))){
          if(array('oui')){
              echo '<style>.Oui{color:#FFFFFF}</style>';
            }
          if(array('x')){
            echo '<style>.X{color:#000000}</style>';
            }
          $events[$date_event][$key]['pseudo'] = $participant->pseudo;
          $events[$date_event][$key]['classe'] = $participant->classe;
          $events[$date_event][$key]['reponse'] = $reponse;
        }
        if(in_array(strtolower($reponse), array('non'))){
          $eventsNons[$date_event][$key]['pseudos'] = $participant->pseudo;
        }
      }
    }
    if(Tools::isDeveloper()){
      echo "<span style='color:red'>Page: reponse" . __FILE__ . "</span> | <span style='color:yellowgreen'>Class: " . __CLASS__ . "</span> | <span style='color:hotpink'>Function: " . __FUNCTION__ . "</span> | <span style='color:cyan'>Ligne: " . __LINE__ . " </span><pre style='background:white;color:black;'>";
        print_r($reponse);
      echo "</pre><hr>";
    }
 
    return ['events' => $events, 'eventsNons' => $eventsNons, 'titre'=>$titre, 'participants'=>$participants];
  }
 
;)