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

Flex Drag And Drop – Drag And Drop natif avec dragEnabled et dropEnabled

La fonctionnalité de Drag And Drop (glisser-déposer) fait partie des plus puissantes et des plus simples à mettre en place. Comme vous allez le voir, il est très simple d'activer les fonctionnalités de drag and drop sur certains composants standard, et avec un peu de code supplémentaire, vous pouvez permettre le drag and drop sur n'importe quel composant.

La manière la plus simple d'implémenter le drag and drop est d'utiliser les composants ayant ces comportement drag and drop de base. Ces composants sont List, Tree, DataGrid, Menu, HorizontalList, PrintDataGrid et TileList.

Chacun de ces composants utilisent le glisser déposer de la même manière. Ils ont chacun une propriété dragEnabled et une propriété dropEnabled. Ces propriétés sont à false par défaut. Quand vous fixez la propriété dragEnabled à true pour un composant, vous pouvez cliquez sur ses éléments et les déplacer. Bien sur, dans la plupart des cas il faudra que l'utilisateur puisse déposer cet élément quelque part sur l'application. C'est ce qui est permit quand on fixe la propriété dropEnabled à true.

Quand on passe dropEnabled à true pour un composant, l'utilisateur peut déposer un item sur ce composant et la donnée de cet item sera ajoutée à l'autre composant.

L'exemple suivant illustre à la fois l'utilisation de dragEnabled et de dropEnabled. La première DataGrid Flex contient de la data sur des morceaux de musique. L'utilisateur peut déplacer ces items vers une seconde DataGrid qui pourrait représenter une playlist.

<?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="Ma Musique"/>
			<mx:DataGrid dragEnabled="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Titre Chanson" dataField="title"/>
					<mx:DataGridColumn headerText="Artiste" dataField="artist"/>
				</mx:columns>
				<mx:dataProvider>
					<mx:ArrayCollection>
						<mx:Object songId="0" title="Hello Everybody" artist="UMFM"/>
						<mx:Object songId="1" title="Breathe" artist="Télépopmusik"/>
						<mx:Object songId="2" title="PolkaMatic" artist="Vitalic"/>
						<mx:Object songId="3" title="Am I Free" artist="Wax Tailor"/>
					</mx:ArrayCollection>
				</mx:dataProvider>
			</mx:DataGrid>
		</mx:VBox>
		<mx:VBox height="100%">
			<mx:Label text="PlayList"/>
			<mx:DataGrid dropEnabled="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Titre Chanson" dataField="title"/>
					<mx:DataGridColumn headerText="Artiste" dataField="artist"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>
	</mx:HBox>
</mx:Application>

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

Si vous testez l'application, vous verrez que lorsque l'on clique et drag un élément de la DataGrid Ma Musique, Flex crée une copie de cet élément qui va bouger en même temps que la souris. Un cercle rouge avec un croix apparaît à côté du curseur jusqu'à ce que l'utilisateur se dirige vers une zone où il pourra déposer cet élément. Cette possibilité de drop est indiqué par une pastille verte avec un +.

Si vous lâchez l'item ailleurs dans l'application, rien ne se passera. Cependant, si vous le déposez sur une zone prévue à cet effet, l'item sera ajouté à la cible (drop target) là où vous avez déposé l'objet.