Discussion :

[Tonyrion]

Bonjour,

Je me suis mis dans la tête de développer un écran permettant d'utiliser le drag & drop via la bibliothèque Jquery UI.

Le but est de réaliser un drag & drop de composition d'équipe et pour le moment je cherche juste à faire fonctionner les éléments essentiels à savoir:

Créer une partie draggable de l'effectif pour le moment toute simple, qui sera à terme alimenté par ma base de données mais ça ce n'est pas un problème.

Créer une partie droppable dans laquelle déposer les éléments sélectionnés depuis le draggable. Cette partie permettra de composer son équipe.

Pouvoir valider la composition lorsque le choix est arrêté, probablement via un bouton.

Donc pour le moment j'ai créé la partie draggable et droppable avec en dur quelques éléments.

Je me heurte aux problèmes suivant:

-Pour sauvegarder la position et l'id de chaque élément sélectionné et positionné dans le droppable, est il possible de le réaliser directement ou dois-je passer par un tableau contenant des cellules, chaque cellule étant un droppable afin de fixer une position.

Quelle que soit la solution, comment faire pour pouvoir sauvegarder la position et l'id de l'élément déposé?

J'avais commencé avec un test afin de créer un tableau qui se remplissait à chaque élément placé dans le droppable. N'arrivant à récupérer que l'ID du draggable et non l'id du joueur ne sachant pas où le placer, j'avais initialement placé directement l'id du joueur à la place de l'id du draggable en pensant le générer à la volée lorsque je ferais un select des effectifs.

J'ai vu sur des forums qu'il fallait créer un formulaire afin de passer la position et l'id du joueur lors de la validation.

En fait le tableau me permet de pouvoir simuler toutes les positions possibles sur le terrain sachant qu'à terme en fonction du choix de la tactique, je rendrais active seulement les cellules nécessaires.

Cependant j'ai vu sur une page qu'on pouvait aussi directement indiquer les positions possibles d'une tactique , sans passer par un tableau, mais le code était trop complexe pour mes connaissances et pour que je puisse m'en inspirer.

En fait je cherche donc la bonne méthode et des exemples afin de voir comment l'appliquer car là ça fait maintenant 1 semaine que je test beaucoup de choses sans avoir si je m'oriente dans la bonne direction et sans avancer.

Voici le script, pour le moment très basique réalisé:


Le code script:

Code js :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script>
 
  $(function(){
 
    var dropped = []
 
    $('#joueur1').draggable({
      revert : 'invalid'
    });
    $('#joueur2').draggable({
      revert : 'invalid'
    });
    $('#joueur3').draggable({
      revert : 'invalid'
    });
 
    $('#pos1').droppable({
 
      drop: function( event, ui ) {
        //deleteImage( ui.draggable );
        var id_droppable = ui.draggable.attr("id");
        var id_position = ui.droppable.attr("id");
        var str = id_position+id_droppable;
        dropped.push(str);
        alert(dropped);
      }
 
    });
 
    $('#pos2').droppable({
 
      drop: function( event, ui ) {
        //deleteImage( ui.draggable );
        var id_droppable = ui.draggable.attr("id");
        dropped.push(id_droppable);
        alert(dropped);
      }
 
    });
 
    $('#pos3').droppable({
 
      drop: function( event, ui ) {
        //deleteImage( ui.draggable );
        var id_droppable = ui.draggable.attr("id");
        dropped.push(id_droppable);
        alert(dropped);
      }
 
    });
 
    $('#pos4').droppable({
 
      drop: function( event, ui ) {
        //deleteImage( ui.draggable );
        var id_droppable = ui.draggable.attr("id");
        dropped.push(id_droppable);
        alert(dropped);
      }
 
    });
 
    $('#pos5').droppable({
 
      drop: function( event, ui ) {
        //deleteImage( ui.draggable );
        var id_droppable = ui.draggable.attr("id");
        dropped.push(id_droppable);
        alert(dropped);
      }
 
    });
 
  });
 
  </script>

Le code HTML

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
<body>
 
  <div id="joueur1" class="ui-widget-content">
    <p>joueur1</p>
  </div>
  <div id="joueur2" class="ui-widget-content">
    <p>joueur2</p>
  </div>
  <div id="joueur3" class="ui-widget-content">
    <p>joueur3</p>
  </div>
 
  <div id="composition">
    <p>Composition</p>
    <table>
      <tr>
        <td id="pos1"></td>
        <td id="pos2"></td>
        <td id="pos3"></td>
        <td id="pos4"></td>
        <td id="pos5"></td>
      </tr>
    </table>
  </div>
 
</body>

Le code CSS

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  #joueur1 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #joueur2 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #joueur3 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #composition { width: 300px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  #pos1 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #pos2 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #pos3 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #pos4 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #pos5 { width: 50px; height: 80px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  table, th, td {
    border: 1px solid black;}
  </style>

[mathieu]

je pense que l'effet "droppable" est surtout utile si dans la zone de dépôt, vous voulez choisir la position de l'élément placé.

dans votre cas, vous voulez juste savoir si le joueur est dans une position ou pas. donc à votre place je partirai plutot sur des listes liées comme dans cet exemple :
https://jqueryui.com/sortable/#connect-lists
avec cela, la 1re liste est celle des joueurs non choisis et ensuite chaque position est une autre liste.

[Tonyrion]

Merci pour votre réponse.
J'avais essayé d'adapter ce code car j'avais effectivement vu que le sortable permettait de récupérer la position plus simplement, seulement je me suis heurté à un problème que je n'avais pas décrit précédemment.
De ce que j'ai vu le sortable permet de classer des éléments les uns par rapport aux autres en replaçant le tout.
Si je bouge l’élément 1 après le 3, le 2 va se décaler à la place du 1 et le 3 à la place du 2.
Mont but est de faire une composition comme on en voit avant match.
Par exemple: https://www.teampro.co/picker/my-tea...24802136498703

Du coup, il me semble que le sortable ne permet pas de parvenir à un résultat de ce type.

[mathieu]

nous ne pouvons pas voir le résultat du lien, il y a un formulaire de connexion.

Si je bouge l’élément 1 après le 3, le 2 va se décaler à la place du 1 et le 3 à la place du 2.

ceci est pour une seule liste avec toutes les positions. mais ce que je vous conseillais est de mettre une liste par position donc il reste juste à voir comment mettre un seul élément par liste.