Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Drag And Drop – Déplacer des éléments avec dragMoveEnabled

Le comportement par défaut de composants ayant le drag and drop est de permettre à l'utilisateur de copier des éléments depuis un autre composant. Cependant, vous pouvez aussi avoir besoin de seulement déplacer ces éléments plutôt que de les copier. Pour cela, il suffit de passer la propriété dragMoveEnabled à true. En elle-même, passer dragMoveEnabled à true n'aura aucun effet. Vous devez aussi vous assurer que dragEnabled est bien à true pour ce composant.

L'exemple suivant utilise dragMoveEnabled pour créer une simple application qui permet à l'utilisateur de bouger ses messages depuis une boîte de réception vers la corbeille:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" viewSourceURL="srcview/index.html">
	<mx:HBox width="100%" horizontalAlign="center">
		<mx:VBox height="100%">
			<mx:Label text="Boite de récéption" color="white" fontWeight="bold"/>
			<mx:DataGrid dragEnabled="true" dragMoveEnabled="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Expediteur" dataField="from"/>
					<mx:DataGridColumn headerText="Destinataire" dataField="to"/>
					<mx:DataGridColumn headerText="Sujet" dataField="subject"/>
					<mx:DataGridColumn headerText="Date" dataField="date"/>
				</mx:columns>
				<mx:dataProvider>
					<mx:ArrayCollection>
						<mx:Object emailId="0" from="a@a.com" to="bob@fai.com"
							subject="Email important" date="05/02/2009"/>
						<mx:Object emailId="1" from="b@b.com" to="bob@fai.com"
							subject="Second Email important" date="05/02/2009"/>
						<mx:Object emailId="2" from="c@c.com" to="bob@fai.com"
							subject="Relance" date="05/02/2009"/>
						<mx:Object emailId="3" from="d@d.com" to="bob@fai.com"
							subject="Encore un" date="05/02/2009"/>							

					</mx:ArrayCollection>
				</mx:dataProvider>
			</mx:DataGrid>
		</mx:VBox>
		<mx:VBox height="100%">
			<mx:Label text="Corbeille" color="white" fontWeight="bold"/>
			<mx:DataGrid dropEnabled="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Expediteur" dataField="from"/>
					<mx:DataGridColumn headerText="Destinataire" dataField="to"/>
					<mx:DataGridColumn headerText="Sujet" dataField="subject"/>
					<mx:DataGridColumn headerText="Date" dataField="date"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>
	</mx:HBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Dans cet exemple, vous pouvez seulement déplacer les items dans un sens, depuis la boîte de réception vers la corbeille. Dans une vraie application email, vous voudrez sûrement permettre à l'utilisateur de remettre ses mails dans la boîte de réception. Pour cela, il suffit de passer dragEnabled et dropEnabled à true pour les 2 composants.

Quand vous mettez dragMoveEnabled à true pour un composant, il est déplacé par défaut. Cependant, si l'utilisateur appuie sur la touche Ctrl pendant le déplacement, cet item sera copié et non déplacé. Dans la plupart des cas, c'est un comportement acceptable. Dans d'autres cas, vous voudrez vous assurer que les items sont seulement déplacés. Vous ne pouvez pas faire ce changement en MXML. En revanche, vous pouvez utiliser ActionScript pour écouter les évènements et gérer ce comportement.