Gérer la collision entre draggable

**Arnaud F.** · 08/07/2009, 13h08

Bonjour,

j'ai un div dans laquelle peuvent se trouver plusieurs éléments "Dragguable".
Je souhaiterais faire en sorte que les éléments ne peuvent pas se superposer. Bref, dès que l'on tente de faire une intersection entre ces deux éléments, l'intersection ne se fait pas.

Possible ? Si oui, comment ?

**gwyohm** · 08/07/2009, 15h25

Salut,

Une solution est d'implémenter l'option revert du Draggable comme une fonction. Dans la fonction, tu testes si ton DIV est en intersection avec un autre, si oui, tu renvoies true, le div draggé sera alors remis en position initiale s'il se superpose à un autre.

Une autre solution est de passer par l'option snap qui prend en parametre les coordonnées proposées pour l'objet drag, et l'objet drag

Code :

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

function(x, y, drag)

L'avantage de cette méthode c'est qu'elle renvoie les coordonnées forcées de l'objet draggé. Tu peux donc tester si les nouvelles coordonnées n'intersectent pas un autre div et renvoyer les coordonnées proposées. Sinon, et c'est là que ca se complique renvoyer les dernières "bonnes coordonnées". Comme je ne savais pas si ca marcherait, j'ai écrit le code vite fait... qui marche, mais surement pas optimisé. De plus je ne suis pas sur de ma fonction intersect...

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">
/**
 * @description :
 * Deux objets 1 et 2 se superposent-ils ?
 * @params
 * aPos position de l'element 1
 * aDim dimension de l'element 1
 * bPos positon de l'element 2
 * bDim dimension de l'element 2
 */ 
function intersect(aPos, aDim, bPos, bDim) {
        // On créé un range sur la largeur de l'objet 2
	var rbW = $R(bPos.left, bPos.left + bDim.width);
        // On créé un range sur la hauteur de l'objet 2
	var rbH = $R(bPos.top, bPos.top + bDim.height);
        // Calcul des coordonnées A,B,C,D du rectangle représentant l'élément 1
	var A = {x: aPos.left, y: aPos.top};
	var B = {x: aPos.left + aDim.width, y: aPos.top};
	var C = {x: aPos.left + aDim.width, y: aPos.top + aDim.height};
	var D = {x: aPos.left, y: aPos.top + aDim.height};
        // Si A est dans les 2 range, lors A est dans l'element 2
	if(rbW.include(A.x) && rbH.include(A.y)) {return true;}
        // Si B est dans les 2 range, lors B est dans l'element 2
	if(rbW.include(B.x) && rbH.include(B.y)) {return true;}
        // Si C est dans les 2 range, lors C est dans l'element 2
	if(rbW.include(C.x) && rbH.include(C.y)) {return true;}
        // Si D est dans les 2 range, lors D est dans l'element 2
	if(rbW.include(D.x) && rbH.include(D.y)) {return true;}
        // pas trop sur de moi... cas ou les éléments se superposent mais pas leurs coins...
	if(A.x <= rbW.start && B.x >= rbW.end  && (rbH.include(A.y) || rbH.include(B.y) || rbH.include(C.y) || rbH.include(D.y) || (A.y <= rbH.start && D.y >= rbH.end))) {
		return true;
	}
	if(A.y <= rbH.start && D.y >= rbH.end  && (rbW.include(A.x) || rbW.include(B.x) || rbW.include(C.x) || rbW.include(D.x) || (A.x <= rbW.start && B.x >= rbW.end))) {
		return true;
	}
	if(D.x <= rbW.start && C.x >= rbW.end  && (rbH.include(A.y) || rbH.include(B.y) || rbH.include(C.y) || rbH.include(D.y) || (B.y <= rbH.start && C.y >= rbH.end))) {
		return true;
	}
	if(B.y <= rbH.start && C.y >= rbH.end  && (rbW.include(A.x) || rbW.include(B.x) || rbW.include(C.x) || rbW.include(D.x) || (D.x <= rbW.start && C.x >= rbW.end))) {
		return true;
	}
}
// cache des dernieres "bonnes coordonnées"
var lastGood = {};
Event.observe(window, "load", function(e) {
	// on fait un reverse avant de faire un absolutize pour ne pas que les draggable soient les uns sur les autres
       $$(".draggable").reverse().invoke("absolutize");
       // pour chaque draggabke
	$$(".draggable").each( function(shape) {
		// on initialise lastGood avec leur positions actuelles
                lastGood[shape.identify()] = shape.positionedOffset();
                // on construit le draggable
		new Draggable(shape, {
                // avec la fonction snap
		snap:function(x, y, drag) {
			// on recupere l'element
                        var object = drag.element;
                        // on recupere les dimensions de l'element
			var objDim = object.getDimensions();
			var objPos = {left:x, top:y};
                        // pour chaque element de classe draggable
			var draggables = $$(".draggable");
			for(var i=0;i<draggables.length;i++) {
				var other = draggables[i];
                                // si ce n'est pas l'objet draggé
				if(object.identify() != other.identify()) {
                                        // on recupere la position et les dimensions
					var otherPos = other.positionedOffset();
					var otherDim = other.getDimensions();
                                       // si les objets s'intersectent
					if(intersect(objPos, objDim, otherPos, otherDim)) {
                                                // on renvoie la derniere bonne position
						return lastGood[object.identify()] ;
					}
				}
			}
                        // on stocke la position comme etant la derniere bonne
			lastGood[object.identify()] = [x, y];
                        // on renvoie les coordonnées proposées
			return [x, y];
		},
                // passage par la méthode revert
		revert:function(object){
			var failure = false;
                        // on recupere position et dimension
			var objPos = object.positionedOffset();
			var objDim = object.getDimensions();
 
			var draggables = $$(".draggable");
                        // pour chaque autre draggable
			for(var i=0;i<draggables.length;i++) {
				var other = draggables[i];
				if(object.identify() != other.identify()) {
					// on recupere les positions / dimensions d'un autre draggable
                                        var otherPos = other.positionedOffset();
					var otherDim = other.getDimensions();
                                        // si intersection, on est en failure
					if(intersect(objPos, objDim, otherPos, otherDim)) {
						failure = true;
						break;
					}
				}
			}
			return failure;
		}});
	} );
});
</script>
<style type="text/css">
	.draggable {
		float:left;
	}
	.shape1 {
		width:100px;
		height:30px;
		background-color:green;
	}
	.shape2 {
		width:50px;
		height:100px;
		background-color:orange;
 
	}
	.shape3 {
		width:60px;
		height:30px;
		background-color:blue;
 
	}
	.shape4 {
		width:120px;
		height:50px;
		background-color:yellow;
 
	}
	.shape5 {
		width:80px;
		height:80px;
		background-color:red;
	}
</style>
</head>
<body>
	<div id="zone" style="width:800px;height:400px;border:1px solid black;overflow:hidden;position:absolute;">
		<div class="draggable shape1">
 
		</div>
		<div class="draggable shape1">
 
		</div>
		<div class="draggable shape2">
 
		</div>
		<div class="draggable shape3">
 
		</div>
		<div class="draggable shape4">
 
		</div>
		<div class="draggable shape5">
 
		</div>
	</div>
</body>
</html>

**Arnaud F.** · 08/07/2009, 17h23

Salut,

ça à l'air de plus ou moins bien marcher mais je n'ai absolument rien compris au code, du coup de je vais l'étudier de plus près et voir comment ça fonctionne

**gwyohm** · 08/07/2009, 18h38

j'ai commenté un minimum mon post précédent. Si tu ne comprends pas certains points, n'hésite pas

**Arnaud F.** · 09/07/2009, 08h21

T'es un chef

Je regarderais ça plus tard dans la journée

Par contre, j'ai constaté une chose : lorsqu'on est en collision (verticale admettons) on n'autorise plus le déplacement horizontal...

Voulu? Ne faudrait-il pas mettre le code dans le OnDrag?

P.S : vu mon niveau de JS, ceci :

Code :

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

1
2
3
$$(".draggable").reverse().invoke("absolutize");
       // pour chaque draggabke
	$$(".draggable").each( function(shape) {

est quelque chose que je n'ai absolument jamais vu et ne sais donc pas d'où sort le absolutize / reverse / invoke, mais je vais regarder du côté des prototypes

**gwyohm** · 09/07/2009, 10h54

Envoyé par Arnaud F.

Voulu? Ne faudrait-il pas mettre le code dans le OnDrag?

Je ne sais pas ... à tester

Envoyé par Arnaud F.

P.S : vu mon niveau de JS, ceci :

Code :

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

1
2
3
$$(".draggable").reverse().invoke("absolutize");
       // pour chaque draggabke
	$$(".draggable").each( function(shape) {

est quelque chose que je n'ai absolument jamais vu et ne sais donc pas d'où sort le absolutize / reverse / invoke, mais je vais regarder du côté des prototypes

Alors, avec le framework prototype, la fonction $$ renvoie un tableau d'Element.
La méthode reverse permet... d'inverser les éléments d'un tableau.
La méthode invoke ajoutée aux Enumerable permet d'invoquer sur chaque élément de l'enumerable une méthode don le nom est passé en paramètre.
C'est super pratique pour executer la même méthode sur une collection d'objets sans avoir à écrire la boucle ou l'itérateur. Par exemple, pour masquer l'ensemble des liens d'une page, tu peux faire

Code :

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

$$("a").invoke("hide");

Si tu as des parametres à passer, ils passent en parametre supplémentaires à invoke :

Code :

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

1
2
$$("a").invoke("addClassName", "nouvelleClasseCss");
$$("a").invoke("setStyle", {color:"#ff0000", fontSize:"20px"});

**Arnaud F.** · 10/07/2009, 10h03

Vu que vous m'avez aidé, je me permet de vous faire un petit retour sur la fonction intersect qui peut être beaucoup plus simplement écrite, à savoir de la manière suivante :

Code :

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

1
2
3
4
5
6
7
8
function intersect(aPos, aDim, bPos, bDim) {
	var maxgauche = Math.max(aPos.left, bPos.left);
	var mindroit = Math.min((aPos.left + aDim.width), (bPos.left + bDim.width));
	var maxbas = Math.max(aPos.top, bPos.top);
	var minhaut = Math.min((aPos.top + aDim.height), (bPos.top + bDim.height));
 
	return (maxgauche < mindroit) && (maxbas < minhaut);
}

En espérant que ça puisse servir à d'autres

Gérer la collision entre draggable

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager