Manipulação Direta - Drag n Drop

Quando usar

Para mover diretamente itens de um grupo para uma lista de seleção
Para mover interfaces e partes de interfaces na área disponível (janelas)
Para redimensionar componentes (portlets)

Estrutura

Interfaces que suportam manipulação direta, devem prever:

Objetos que suportam o drag (arrastar)
Pistas visuais da possibilidade de Drag
Objetos ou áreas que suportam drop (soltar)

Comportamentos

O comportamento padrão é permitir que o usuário escolha os itens disponíveis num container de forma múltipla ou não, movendo os selecionados então para um container destino ou área desejada. Ainda pode haver um redimensionamento do objeto caso este seja o comportamento de manipulação definido

Geralmente, o usuário pode fazer combinações de seleção usando as teclas Shift ou Ctrl com o botão direito do mouse para selecionar uma sequência ou uma seleção intercalada.

Outro comportamento é clicar e arrastar de uma lista para outra.

Boas Práticas

Durante o evento de Drag, apresentar cursor de erro no mouse, quando a área destino em foco não uma área válida.

Prós:

conjunto selecionado é fácil de entender;
se desejado a seleção pode ser uma lista ordenada;
manipula facilmente uma lista grande.

Contras:

consumo de espaço pode ser elevado caso hajam váriam containers de origem/destino. complicando o trabalho com um grande conjunto de itens selecionados.

Exemplo

Unknown macro: {flash}

Código fonte

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle"
	creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import com.datasul.meiu.dragdrop.AssociateController;

			[Bindable] private var _controller:AssociateController;
			[Bindable] public var targetProvider:ArrayCollection = new ArrayCollection();

			[Bindable]
			[Embed(source="/assets/icons/fast_forward_24.png")]
			private static var icon_fast_forward:Class;

			[Bindable]
			[Embed(source="/assets/icons/play_24.png")]
			private static var icon_forward:Class;

			[Bindable]
			[Embed(source="/assets/icons/play_volta_24.png")]
			private static var icon_rew:Class;

			[Bindable]
			[Embed(source="/assets/icons/rew_24.png")]
			private static var icon_fast_rew:Class;

			private function init():void {
				_controller = new AssociateController(this);
			}

		]]>
	</mx:Script>
	<mx:ArrayCollection id="sourceProvider">
		<mx:Array id="myArray">
            <mx:Object name="Nome A"/>
            <mx:Object name="Nome B"/>
            <mx:Object name="Nome C"/>
            <mx:Object name="Nome D"/>
            <mx:Object name="Nome E"/>
            <mx:Object name="Nome F"/>
            <mx:Object name="Nome G"/>
            <mx:Object name="Nome H"/>
            <mx:Object name="Nome I"/>
        </mx:Array>
	</mx:ArrayCollection>
	<mx:HBox id="hb1" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
paddingBottom="10" horizontalGap="0">

		<mx:Spacer width="10"/>

		<!-- Origem -->
		<mx:VBox id="vb1" width="50%" height="100%" verticalGap="0">
			<mx:Spacer height="25"/>
			<mx:Label id="titlelbldg1" text="Disponíveis" width="100%" fontSize="12"
fontWeight="bold"/>
			<mx:Canvas id="cnv1" width="100%"/>
			<mx:DataGrid id="dg1" width="100%" height="100%"
dataProvider="{sourceProvider}"
				editable="false"
				dropEnabled="true"
				dragMoveEnabled="true"
				dragEnabled="true"
				allowMultipleSelection="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Nome" dataField="name"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>

		<!-- Botões -->
		<mx:VBox height="100%">
			<mx:Spacer height="25"/>
			<mx:VBox id="vb2" width="80" height="100%" verticalAlign="middle"
horizontalAlign="center" backgroundImage="''">
				<mx:LinkButton id="btnAddAll" icon="{icon_fast_forward}"
width="45" click="_controller.addAll()" toolTip="Adicionar todos"/>
				<mx:LinkButton id="btnAdd" icon="{icon_forward}" width="45"
click="_controller.add()" toolTip="Adicionar"/>
				<mx:Spacer height="22" width="25"/>
				<mx:LinkButton id="btnRemove" icon="{icon_rew}"
click="_controller.remove()" toolTip="Remover" width="45"/>
				<mx:LinkButton id="btnRemoveAll" icon="{icon_fast_rew}"
click="_controller.removeAll()" toolTip="Remover todos" width="45"/>
			</mx:VBox>
		</mx:VBox>

		<!-- Destino -->
		<mx:VBox id="vb3" width="50%" height="100%" verticalGap="0">
			<mx:Spacer height="25"/>
			<mx:Label id="titlelbldg2" text="Selecionados" width="100%" fontSize="12"
fontWeight="bold"/>
			<mx:Canvas id="cnv2" width="100%"/>
			<mx:DataGrid id="dg2" width="100%" height="100%"
dataProvider="{targetProvider}"
				editable="false"
				dropEnabled="true"
				dragMoveEnabled="true"
				dragEnabled="true"
				allowMultipleSelection="true">
				<mx:columns>
					<mx:DataGridColumn headerText="Nome" dataField="name"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>

		<mx:Spacer width="10"/>

	</mx:HBox>
</mx:VBox>

Referências

http://designinginterfaces.com/

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}

Páginas filhas