[Drag & Drop] Equipement

**Lianodel** · 14/03/2009, 14h09

Bonjour =).

Voilà, j'ai dans l'idée de réaliser un jeu web, pour cela je dois gérer un équipement, et je voulais utiliser la technologie Drag&Drop. C'est chose faite, tout marche mais il persiste quelques problèmes un peu dérangeant.

Un exemple visuel étant mieux qu'un long discours : hop.

Premier problème : Lorsqu'on prend un objet (ex : tete 3), il passe au dessus des objets situés au dessus (tete 1 et tete 2) et en dessous de ceux qui sont en dessous (pied 1 et pied 2). Une affaire de z-index mais je ne sais pas bien comment m'y prendre.

Deuxième problème : Attention, suivez ^^. Prenons un objet (ex : tete 1), équipons le (en haut à gauche). Ensuite prenons un autre objet (ex : tete 2) et équipons le à la place de celui déjà présent. celui-ci (tete 1) revient dans l'inventaire et l'autre (tete 2) prend sa place, tout va bien. Mais là, si on reprend le premier objet (tete 1), là, on peut le déposer partout, donc dans le vide. C'est juste un problème visuel parce qu'il est considéré comme étant dans l'inventaire s'il est placé ailleurs que dans l'équipement.

J'espère être compréhensible =/.

Donc voilà pour ça.

Ensuite, je voudrais savoir si j'étais bien partit dans mon JQuery ou s'il y a plus simple. Sait-on jamais...

Enfin, j'aimerais mettre en place, pour proposer une alternative au drag&drop, un système simple de clic pour équiper. En gros je double clic sur un objet et il s'équipe directement. Mais là encore, j'ai deux questions, est-ce que c'est possible de le faire sachant qu'il y a déjà du drag & drop (qui fonctionne au clic) et si oui, comment partir ou comment faire, car je n'ai pas vraiment d'idée.

Cette deuxième partie est optionnelle, j'aimerais surtout que le drag & drop fonctionne parfaitement.

Le HTML :

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
<div id="div_principal">
	<div id="tete" class="emplacement"></div>
	<div id="ceinture" class="emplacement"></div>
	<div id="armure" class="emplacement"></div>
	<div id="collier" class="emplacement"></div>
	<div id="mainD" class="emplacement"></div>
	<div id="mainG" class="emplacement"></div>
	<div id="pied" class="emplacement"></div>
</div>
<div id="div_sac">
	<a href="" class="hov_equip"><div class="inventaire" equip="tete" id="1" style="background-image:url(img/items/tete1.png)"></div></a>
	<a href="" class="hov_equip"><div class="inventaire" equip="tete" id="2" style="background-image:url(img/items/tete2.png)"></div></a>
	<a href="" class="hov_equip"><div class="inventaire" equip="tete" id="3" style="background-image:url(img/items/tete3.png)"></div></a>
	<a href="" class="hov_equip"><div class="inventaire" equip="pied" id="4" style="background-image:url(img/items/pied1.png)"></div></a>
	<a href="" class="hov_equip"><div class="inventaire" equip="pied" id="5" style="background-image:url(img/items/pied2.png)"></div></a>
</div>
<div id="hov_equip"></div>

Le CSS : La class "inventaire" a un z-index:99 dans le css. Le reste, je ne pense pas que ce soit nécessaire.

Le JQuery :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
$(document).ready(function(){
	// On rend draggable les éléments avec la class inventaire
	$('.inventaire').draggable({
		helper: 'clone',
	});
 
	//  On spécifie que les éléments avec la class emplacement peut acceuillir des éléments...
	$(".emplacement").droppable({
		accept: ".inventaire", // ... avec la class inventaire
		tolerance: 'pointer', // L'utilisateur doit avoir sa souris dans la zone de drop pour qu'il fonctionne
		drop: function(ev, ui){
			var type_equip = $(this).attr('id'); // Type de l'équipement dans l'inventaire (tete, pied, ...)
			var drag1 = $(ui.draggable); // L'élément dragué est drag1
			drag1.css("z-index", "99"); // Mettre l'élément dragué au dessus de tout
			var equip = drag1.attr('equip'); // Type de l'équipement de l'élément dragué (tete, pied, ...)
			var id_objet = drag1.attr('id'); // ID de l'élément dragué (1, 2, 3, ...)
			if(type_equip==equip){ // Si l'élément dragué est dropé au bon endroit (casque > tete)
				if(($(this).children().attr('equip')==type_equip) && ($(this).children().attr('id')!=drag1.attr('id'))){ // Si l'emplacement de l'inventaire n'est pas vide
					$("#div_sac").append($(this).children().clone()); // On fait un clone de l'élément déjà présent et on le met dans le sac
					$(this).children().remove(); // On supprime l'original qui reste dans l'emplacement
				}
				var clone = $('#div_sac').children();
				clone.draggable();
				clone.css("top", "0");
				clone.css("left", "0");
				$(this).append(drag1); // On met le nouvel équipement
				drag1.css("top", "0");
				drag1.css("left", "0");
			}
			else{ // Si l'élément n'est pas dropé dans le bon emplacement
				alert("Cet objet est fait pour l'emplacement "+equip+" !");
			}
		}
	});
 
	$('#div_sac').droppable({  
		accept :".ui-draggable",
		tolerance:'pointer',
		drop:function (ev,ui) {
			$(this).append($(ui.draggable));
			$(".ui-draggable").css("top", "0");
			$(".ui-draggable").css("left", "0");
		}
	});
 
	$(".inventaire").hover(function(){
		var id_equipement = $(this).attr('id');
		var nom_equipement = $(this).attr('equip');
		$.ajax({
			type: "GET",
			url: "traitement.php",
			data: "id="+id_equipement+"&equip="+nom_equipement,
			success: function(msg){
				$("#hov_equip").html( msg );
			}
		});
	});
});

Voilà, il doit y avoir ce qu'il faut. Merci pour ceux qui prendront du temps pour mes problèmes =).

**danielhagnoul** · 16/03/2009, 16h52

Bonjour.

Je suis en train de jouer avec le drag et drop que je ne connais pas encore.

Je n'ai donc pas la solution, mais il me semble tout de même que le fichier javascript pourrait être modifié comme suit :

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
 
$(document).ready(function(){
    var dropOK = false;
 
    $(".inventaire").draggable({
        snap: ".emplacement",
        stop: function(event, ui) {
            alert("drag terminé, mais est-il bien placé : " + dropOK);
            dropOK = false;
        }
    });
 
    $(".emplacement").droppable({
        accept: ".inventaire",
        drop: function(event, ui) {
            alert("drop terminé !");
            dropOK = true;
        }
    });
});

**danielhagnoul** · 16/03/2009, 17h18

Bonjour.

Amélioration capitale avec revert :

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
 
$(document).ready(function(){
    var dropOK = false;
 
    $(".inventaire").draggable({
        cursor: "crosshair",
        revert: "invalid",
        snap: ".emplacement",
        stop: function(event, ui) {
            alert("drag terminé, mais est-il bien placé : " + dropOK);
            dropOK = false;
        }
    });
 
    $(".emplacement").droppable({
        accept: ".inventaire",
        drop: function(event, ui) {
            alert("drop terminé !");
            dropOK = true;
        }
    });
});

**danielhagnoul** · 16/03/2009, 17h32

Bonjour.

Cette dernière modification (stack) résout le problème du z-index :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    $(".inventaire").draggable({
        cursor: "crosshair",
        revert: "invalid",
        snap: ".emplacement",
        stack: { group: '.inventaire', min: 50 },
        stop: function(event, ui) {
            alert("drag terminé, mais est-il bien placé : " + dropOK);
            dropOK = false;
        }
    });

**Lianodel** · 17/03/2009, 15h52

Bonjour,

Tout d'abord, merci pour ta participation.

J'ai fusionné ton code et le mien et j'ai bidouiller tout ça. Tu utilises des options que je ne connaissais pas, alors je me suis renseigner et j'en ai découvert des nouvelles, ce qui m'a permit d'améliorer tout ça. Tout à l'air de fonctionner comme il faut maintenant. Ton stack m'a bien aidé !

Mon problème venait surtout du fait que je faisais un clone alors que ça ne servait absolument à rien et que ça ajoutait plein de problèmes.

Du coup, j'ai réussi à mettre en place le principe du double clique, tout marche à merveille.

Merci encore à toi

.

[Drag & Drop] Equipement

jQuery

Discussions similaires

Partager

Partager