Mise en place d'un Drag & Drop
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:
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:
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:
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> |
