drag&drop de VGroup à Group

Version imprimable

Bonjour, j'ai suivi les tutos et exemples le plus fidèlement possible et pourtant je n'arrive pas à faire marcher le drag & drop
Pour l'instant je ne fais que des "trace" mais rien ne s'affiche. J'ai bien le drag qui démarre, mais impossible d'accepter le drop
Pouvez vous m'aider?

ModuleGardenEditor.mxml

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
 
<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" width="1000" height="800" xmlns:gardeneditor="gardeneditor.*"
		  backgroundColor="0x888888" backgroundAlpha="0.1"
		  contentCreationComplete="contentCreationCompleteHandler(event)">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.core.DragSource;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
 
			protected function contentCreationCompleteHandler(event:Event):void
			{
				var gardenItem:GardenItem = null;
				for(var i:int=0;i<gardenItemsPanel.numChildren;i++){
					gardenItem = gardenItemsPanel.getChildAt(i) as GardenItem;
					gardenItem.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
				}
			}
 
			protected function mouseMoveHandler(event:MouseEvent):void{
				var dragInitiator:GardenItem = GardenItem(event.currentTarget);
				var dragSource:DragSource = new DragSource;
				dragSource.addData(dragInitiator,"GardenItem");
 
				DragManager.doDrag(dragInitiator, dragSource, event);
			}
 
			protected function gardenPlan_dragEnterHandler(event:DragEvent):void
			{
				trace("enter");
				DragManager.acceptDragDrop(GardenPlan(event.currentTarget));
			}
 
			protected function gardenPlan_dragDropHandler(event:DragEvent):void
			{
				trace("drop");
			}
 
		]]>
	</fx:Script>
	<s:SkinnableContainer backgroundColor="0x888888" backgroundAlpha="0.5" width="128" height="100%">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="Glissez les objets çi dessous sur le plan" width="100" textAlign="center"/>
		<gardeneditor:GardenItemsPanel id="gardenItemsPanel"/>
	</s:SkinnableContainer>
	<s:SkinnableContainer backgroundColor="0xffffff" backgroundAlpha="1" width="80%" height="100%">
		<gardeneditor:GardenPlan id="gardenPlan" 
								 dragEnter="gardenPlan_dragEnterHandler(event)"
								 dragDrop="gardenPlan_dragDropHandler(event)"/>		
	</s:SkinnableContainer>
</s:Module>

GardenItemsPanel.mxml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:gardeneditor="gardeneditor.*"
		  horizontalCenter="0">
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
	<gardeneditor:GardenItem backgroundImg="@Embed(source='../assets/arbre.png')" />
	<gardeneditor:GardenItem backgroundImg="@Embed(source='../assets/arbre.png')" />
	<gardeneditor:GardenItem backgroundImg="@Embed(source='../assets/arbre.png')" />
</s:VGroup>

GardenItem.mxml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="96" height="96">
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var backgroundImg:Object;
 
		]]>
	</fx:Script>
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:BitmapFill source="{backgroundImg}"/>
		</s:fill>
	</s:Rect>
</s:SkinnableContainer>

GardenPlan.mxml

Code:

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
					  xmlns:s="library://ns.adobe.com/flex/spark" 
					  xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
 
</s:Group>

Merci!

bon, j'ai découvert que ça venait du fait que "GardenPlan" (l.58) n'avait pas de taille.
Du coup pour etre sûr, j'en ai fait un Canvas et je lui ai ajouté les propriétés suivantes
Code:

1 2 3 <gardeneditor:GardenPlan id="gardenPlan" backgroundColor="0x888888" backgroundAlpha="0.4" width="100%" height="100%" dragEnter="gardenPlan_dragEnterHandler(event)" dragDrop="gardenPlan_dragDropHandler(event)"/>
Mais ce qui est incroyable, c'est que quand j'enlève le backgroundColor en laissant tout le reste, ça ne fonctionne plus ! :koi:

On peut pas faire un drop dans un Group ?

23/07/2012, 09h50
Jim_Nastiq

Salut,

As tu vérifié la taille de ton composant au runtime ?? je parierai sur un width = height = 0 , non ?

Citation:
Envoyé par gere34
bon, j'ai découvert que ça venait du fait que "GardenPlan" (l.58) n'avait pas de taille.
Du coup pour etre sûr, j'en ai fait un Canvas et je lui ai ajouté les propriétés suivantes
Code:

1 2 3 <gardeneditor:GardenPlan id="gardenPlan" backgroundColor="0x888888" backgroundAlpha="0.4" width="100%" height="100%" dragEnter="gardenPlan_dragEnterHandler(event)" dragDrop="gardenPlan_dragDropHandler(event)"/>
Mais ce qui est incroyable, c'est que quand j'enlève le backgroundColor en laissant tout le reste, ça ne fonctionne plus ! :koi:

On peut pas faire un drop dans un Group ?
Oui en effet, c'était ça. Mais l'histoire du backgroundColor, c'est bizarre non?

24/07/2012, 08h44
Jim_Nastiq

Hum , j'ai pas souvenir d'une propriété de style backgroundColor sur un composant spark Group :? , j'ai déjà du mal a comprendre comment il peut t'afficher ton backgroundcolor ...

PS: désolé , je n'avais pas vu ton second post.

Hum...
Citation:
Envoyé par gere34
bon, j'ai découvert que ça venait du fait que "GardenPlan" (l.58) n'avait pas de taille.
Du coup pour etre sûr, j'en ai fait un Canvas et je lui ai ajouté les propriétés suivantes
Code:

1 2 3 <gardeneditor:GardenPlan id="gardenPlan" backgroundColor="0x888888" backgroundAlpha="0.4" width="100%" height="100%" dragEnter="gardenPlan_dragEnterHandler(event)" dragDrop="gardenPlan_dragDropHandler(event)"/>
Mais ce qui est incroyable, c'est que quand j'enlève le backgroundColor en laissant tout le reste, ça ne fonctionne plus ! :koi:

On peut pas faire un drop dans un Group ?
En fait je voudrais une zone navigable (scroll + zoom un peu comme une map) dont je peux skinner les bordures et dans laquelle je peux dropper des éléments graphiques qui resteront interactifs une fois posés. C'est quoi l'idéal?
Pour l'instant j'ai une structure de ce genre :
Code:

1 2 3 4 5 6 7 8 9 <s:SkinnableContainer> <s:Scroller> <s:Group> <mx:Canvas dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)"> </mx:Canvas> </s:Group> </s:Scroller> </s:SkinnableContainer>

Salut,

Alors soit tu te fais le drag & drop de façon simple et sans "contrainte" sur les zones de drop et sur le type de drag&drop (clonage, deplacement, ...):

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
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function group1_mouseDownHandler(event:MouseEvent):void
			{
				if(event.target is Group)
					(event.target as Group).startDrag();
				else
					((event.target as Label).parent as Group).startDrag();
			}
 
			protected function group1_mouseUpHandler(event:MouseEvent):void
			{
				if(event.target is Group)
					(event.target as Group).stopDrag();
				else
					((event.target as Label).parent as Group).stopDrag();
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
	<s:HGroup width="100%" height="100%">
		<s:VGroup width="100" height="100%" id="grpToDrag" top="10" left="10" bottom="10" gap="20">
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#FF0000"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#0000FF"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#00FF00"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
		</s:VGroup>
 
		<s:VGroup width="100%" height="100%" id="grpToDrop" top="10" right="10" bottom="10" gap="20" >
		</s:VGroup>
	</s:HGroup>
</s:Application>

soit, si tu en as besoin tu utilises le dragManager pour gérer cela:

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
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
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import mx.core.DragSource;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.managers.DragManager;
 
			import spark.filters.DropShadowFilter;
 
			private var _dragDownPt:Point;
			private var _currentObjectDragging:Group;
 
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				grpToDrop.addEventListener(DragEvent.DRAG_ENTER, onDragEnter);
				grpToDrop.addEventListener(DragEvent.DRAG_DROP, onDragDrop);
			}
 
			private function onDragEnter(evt:DragEvent):void
			{
				// on accepte le drop sur le conteneur de drop
				DragManager.acceptDragDrop(grpToDrop);
				// on spécifie le type de drag & drop (ici une copie de l'objet)
				DragManager.showFeedback( DragManager.COPY );
			}
 
			private function onDragDrop(evt:DragEvent):void
			{
				// lors du drop il ne s'agit a présent que d'ajouter l'élément droppé  
				// sur la cible et on peut vérifier le format des data transportées.
				if( evt.dragSource.hasFormat( "item" ) )
				{
					var recupData:Object = evt.dragSource.dataForFormat("item");
					// pour faire une vraie copy il aurait fallu cloner l'objet ...
					var grp:Group =  _currentObjectDragging;
					grpToDrop.addElement(grp);
				}
			}
 
			protected function group1_mouseDownHandler(event:MouseEvent):void
			{
				// on enregistre la point de départ
				_dragDownPt = new Point(mouseX,mouseY);
 
				// on enregistre l'objet en cour de dragging
				if(event.target is Group)
					_currentObjectDragging = event.target as Group;
				else
					_currentObjectDragging = (event.target as Label).parent as Group;
 
				// puis on écoute l'éventuel déplacement de la souris
				_currentObjectDragging.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveDuringDrag);
 
			}
 
			protected function group1_mouseUpHandler(event:MouseEvent):void
			{
				_currentObjectDragging.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveDuringDrag);
 
			}
 
			private function onMouseMoveDuringDrag(evt:MouseEvent):void
			{
				// astuce pour s'assurer que la souris a vraiment bouger volontairement
				if(Math.abs(_dragDownPt.x - mouseX) <= 2 && Math.abs(_dragDownPt.y - mouseY) <= 2)
					return;                        
 
				// on ajoute un filtre d'ombre(facultatif évidement)
				var _dragFilter:spark.filters.DropShadowFilter = new DropShadowFilter();    
				// on prépare les données qui seront transportées (optionnel si l'on souhaite l'utilisé ou pas)
				var ds:DragSource = new DragSource();
				ds.addData("data de tout type, Object, string , ... ","item");    
				// on lance le drag via le DragManager en lui passant l'UIcomponent cible, les données et l'événement
				// souris qui a déclenché le drag & Drop(mouse down puis mouse move). Les autres paramêtre de la méthode
				// doDrag permettent notamment d'ajouter une image pour le rendu lors du déplacement de l'objet
				DragManager.doDrag(_currentObjectDragging,ds,evt);
				_currentObjectDragging.filters = [_dragFilter];
				return;
			}
 
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
	<s:HGroup width="100%" height="100%">
		<s:VGroup width="100" height="100%" id="grpToDrag" top="10" left="10" bottom="10" gap="20">
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#FF0000"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me 1" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#0000FF"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me 2" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
			<s:Group width="100" height="100" mouseDown="group1_mouseDownHandler(event)" mouseUp="group1_mouseUpHandler(event)">
				<s:Rect  width="100" height="100">
					<s:fill>
						<s:SolidColor color="#00FF00"/>
					</s:fill>
				</s:Rect>
				<s:Label text="Drag me 3" horizontalCenter="0" verticalCenter="0"/>
			</s:Group>
		</s:VGroup>
 
		<s:Group width="500" height="500" id="grpToDrop" >
			<s:Rect  width="500" height="500">
				<s:fill>
					<s:SolidColor color="#CDCDCD"/>
				</s:fill>
			</s:Rect>
			<s:Label text="Drop here !!!" horizontalCenter="0" verticalCenter="0"/>
		</s:Group>
	</s:HGroup>
</s:Application>

Voila, le composant group est Draggable & Droppable. Encore faut il qu'il soit "dessiner" par le flash player (un group qui n'a pas de contenu n'est pas dessiné car c'est un container).

Je pense que tu as de quoi faire à présent ;)

31/07/2012, 16h01
gere34

super, merci !!! :ccool:

Citation:

Envoyé par Jim_Nastiq

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private function onMouseMoveDuringDrag(evt:MouseEvent):void
{
	// astuce pour s'assurer que la souris a vraiment bouger volontairement
	if(Math.abs(_dragDownPt.x - mouseX) <= 2 && Math.abs(_dragDownPt.y - mouseY) <= 2)
		return;                        
 
	// on ajoute un filtre d'ombre(facultatif évidement)
	var _dragFilter:spark.filters.DropShadowFilter = new DropShadowFilter();    
	// on prépare les données qui seront transportées (optionnel si l'on souhaite l'utilisé ou pas)
	var ds:DragSource = new DragSource();
	ds.addData("data de tout type, Object, string , ... ","item");    
	// on lance le drag via le DragManager en lui passant l'UIcomponent cible, les données et l'événement
	// souris qui a déclenché le drag & Drop(mouse down puis mouse move). Les autres paramêtre de la méthode
	// doDrag permettent notamment d'ajouter une image pour le rendu lors du déplacement de l'objet
	DragManager.doDrag(_currentObjectDragging,ds,evt);
	_currentObjectDragging.filters = [_dragFilter];
	return;
}

Salut, je viens de me pencher à nouveau dessus pour des modif et quelque chose m'a interpellé.
Est ce normal de recréer le dragSource avec les addData, dragImage et de refaire appel à DragManager.doDrag à chaque évènement MOUSE_MOVE ?
On devrait pas le faire seulement au début du drag?