Discussion :

[ouaqa]

Bonjour à tous,

Je débute avec le drag&drop en Flex et je rencontre un problème certainement simple, mais je n'ai trouvé aucune documentation sur le sujet.

Je dispose d'un conteneur graphique héritant de la classe Canvas.
Ce conteneur graphique accepte en drag&drop d'autres éléments graphiques (d’autre classe héritant de Canvas).

Je n'ai pas de problèmes pour glisser-déposer mes éléments dans mon conteneur et ensuite les déplacer au sein du conteneur.

Le problème, c'est que mes éléments peuvent se superposer, étant donné que le conteneur est un Canvas mais, je ne veux pas qu'ils se superposent.
Lors du drop, je peux donc poser un élément n'importe où sur le Canvas, puis le déplacer n’ importe où, peu importe s'il y a un autre élément à cet endroit.

J'ai ajouté une fonction overlap() qui teste l'élément déplacé avec chaque élément de mon conteneur, elle renvoie vrai si deux éléments se superposent, via la méthode displayObject.hittestObject(). Cette fonction est mal faite mais là n'est pas le problème.

Je ne sais pas à quel moment appeler cette fonction et j'imagine qu'il y a une façon plus élégante de résoudre ce problème.

Je n'ai trouvé aucun article sur le sujet ni dans la doc adobe. Si vous pouviez orienter mes recherches, j'en serais grandement reconnaissant.

Merci d'avance, et n'hésitez pas à me demander des bouts de code, si besoin est.

[jylaxx]

Il me semble que la documentation de Flex explique le fonctionnement des événements de drag assez bien...

http://livedocs.adobe.com/flex/3/htm..._5.html#174367

[ouaqa]

La documentation est très complète en effet et ça fait 3 jours que je l'étudie en détails.

Je devrais reformuler ma question.

A l'entrée de l'élément dans son conteneur, le DragManager accepte le drag&drop via la méthode DragManager.acceptDragDrop().

Code :

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

1
2
3
4
5
private function dragEnterHandler (AEvent:DragEvent) : void
		{
			var dropTarget:Canvas = Canvas(AEvent.currentTarget);
			DragManager.acceptDragDrop(dropTarget);
		}

Cette méthode est donc nécessaire pour gérer les évènements DragOver , dragExit et dragDrop.

En écoutant un de ces évènements, je souhaite être capable d'autoriser (ou pas) le drop dans une zone précise de mon Canvas.
Hélas,une méthode du type DragManager.refuseDragDropHere n'existe pas.

Par exemple, imaginons un jeu, genre jeu de dames.
Le plateau est mon Canvas où se déplacent les pions.
Chaque pion est source d'un drag&drop pour les déplacer dans mon échiquier. L'échiquier écoute le dragEnter et autorise le déplacement des pions.
Seulement, dans ce jeu, je ne veux pas avoir le droit de placer un pion sur l'autre, malgré le fait que mon plateau (le canvas) autorise la superposition de displayObjects.

Mon petit doigt et différents tests me disent d'écouter l'évènement DRAG_OVER. Seulement , deux problèmes se posent :
- comment interdire l'évènement DRAG_DROP en cas de superposition seulement.
- l'évènement DRAG_OVER est émis en permanence, du coup, je parcoure la liste des éléments en permanence, ce qui va, à coup sûr être une source de ralentissements, mais pour l'instant ce n'est pas mon problème.

Voila, comme lors de mon dernier soucis, je pense que c'est un concept simple, mais étant le seul codeur flex de ma société, je n'ai personne d'autre que les forums vers qui me tourner lors de ce genre de problèmes.

[jylaxx]

C'est bien dans l'événement dragDrop que tu modifies la position de ton objet, non ?

Dans ce cas il suffit de ne pas modifier la position de l'objet quand il y a overlapping.

Mais ça me parait un peu trop facile comme réponse... alors si tu pouvais fournir le code des différents événements on y verrait plus clair.

Il existe aussi un moyen relativement simple de gérer le drag/drop avec les événements de la souris. Je t'en reparlerai si la solution précédente ne convient pas.

[ouaqa]

Effectivement , la position est modifiée dans l'évènement dragDrop.
Vu que j'suis pas mal à la bourre sur le projet, je vais appliquer cette solution.
C'est que je faisais avant mais je trouve ça pas très élégant, l'utilisateur ne sait (pour le moment) pas pourquoi il n'a pas pu déplacer son élément.

voici donc mon code final :
gestion du dragEnter

Code :

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

1
2
3
4
5
6
 
private function dragEnterHandler (AEvent:DragEvent) : void
{
	var dropTarget:Canvas = Canvas(AEvent.currentTarget);
	DragManager.acceptDragDrop(dropTarget);
}

gestion du dragDrop (la partie concernée est en gras)

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
	
private function dragDropHandler (AEvent:DragEvent) : void
{ 
	var eventFormat : String = AEvent.dragSource.formats[0] ;
	var mousePosition : Point = new Point(AEvent.localX,AEvent.localY) ;
			
	switch (eventFormat)
	{
		case LCMaquetteCreatorManager.ELEMENT_IMAGE_FORMAT :
 	createAnImageElement(AEvent.dragSource.dataForFormat(LCMaquetteCreatorManager.ELEMENT_IMAGE_FORMAT)as String ,
		 						mousePosition);
		break ;
		case LCMaquetteCreatorManager.ELEMENT_TEXT_FORMAT :
		 	createATextElement(AEvent.dragSource.dataForFormat(LCMaquetteCreatorManager.ELEMENT_TEXT_FORMAT)as String);
		break ;
				
		case LCCanvasMaquette.A_DRAGGED_ELEMENT :
			var myElement : LCCanvasElement ;
			myElement = AEvent.dragInitiator as LCCanvasElement ;
			var oldPosition : Point = new Point(myElement.Position.x,myElement.Position.y);
			myElement.Position = mousePosition; 
				
			if (elementOverlap(myElement))
			{ myElement.resetPosition( oldPosition );  }
			oldPosition = null;		
		break ;
		 default :
		 	Alert.show("LCCanvasMaquette :: unknown element format : "+eventFormat);
		 break ;
	}
}

fonction overlap :

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
 
private function elementOverlap (ADraggedElement : LCCanvasElement) : Boolean
{
	var overlapResult : Boolean = false ;
 
	searchUntilTrue : 
	for each (var elementTested : LCCanvasElement in this.elementList)
	{
		if (ADraggedElement != elementTested)
		{
			overlapResult = ADraggedElement.hitTestObject(elementTested);
		}
		if (overlapResult)
		{ break searchUntilTrue ; }
	}
	return overlapResult ;
}

Merci Jylaxx en tout cas. Encore une fois, tu m'a sorti les yeux du pâté