Il y a quelques propriétés très intéressantes sur certains composants qui sont suffisamment clair:

  • dragEnabled
  • dropEnabled
  • dragMoveEnabled

Ces Boolean permettent d'activer la mécanique du drag & drop qui est directement gérée pas Flex. Et oui, presque rien à faire! Flex s'occupe des effets, evidement ils sont personnalisable mais par défaut on a un outil déjà très puissant avec presque aucune ligne de code!

Voici donc un exemple de drag and drop entre deux listes :

[xml]
<mx:ArrayCollection id="contacts">
	<com:Contact nom="Michel" prenom="Michel" email="michmuch@voila.fr" />
	<com:Contact nom="Gérard" prenom="Gérard" email="gg@yahoo.fr" />
	<com:Contact nom="Napoleon" prenom="Dynamite" email="napoleon@dynamite.fr" />
	<com:Contact nom="Jean-Claude" prenom="Convenant" email="fuego@wanadoo.fr" />
	<com:Contact nom="Perceval" prenom="Seigneur" email="perceval@kaamelot.fr" />
</mx:ArrayCollection>

<mx:ArrayCollection id="selections"/>

<mx:Panel width="400" height="210" layout="absolute" title="Drag &amp; Drop">
	<mx:HDividedBox right="10" left="10" top="10" bottom="10">
		<mx:List width="50%" height="100%" dataProvider="{contacts}" 
			labelFunction="displayContact" dragEnabled="true" dropEnabled="true" 
			allowMultipleSelection="true" dragMoveEnabled="true"/>
		<mx:List width="50%" height="100%" dropEnabled="true" 
			labelFunction="displayContact" dragEnabled="true" 
			allowMultipleSelection="true" dragMoveEnabled="true" 
			dataProvider="{selections}"/>
	</mx:HDividedBox>
	<mx:ControlBar height="40" y="165" horizontalAlign="center">
		<mx:Button label="Valider" />
		<mx:Button label="Annuler" />
	</mx:ControlBar>
</mx:Panel>

et voila le résultat en action (comme d'habitude, click droit pour les sources) :