[UI] Jquery UI Sortable

Jquery UI Sortable

Bonjour,;)

J'ai récupéré sur la bibliothèque JQUERY, avec un peu d'amélioration.

Code:

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:

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:

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];
  }
 
;)

bonjour,

Citation:

...mais quand j'actualise je n'arrive pas à garder l'élément dans une autre <li>

(actualisation ou rechargement de page)= perte de donnée, le plugin se réinitialise a chaque chargement de la page, donc pour récupérer la dernière position d'un élément quelconque, il te faut stocker ses informations soit dans une table de la base de donnée ou trouver un autre moyen...

Resolu

Bonsoir,
Oui il fallait enregistrer les information est améliorer mon script avec de l'AJAX

En mettent de l'ajax tout a marcher merci pour ta réponse.
:P