Drag & Drop em Adobe Flex: Como limitar a quantidade de elementos

Neste post gostaria de compartilhar uma solução que aplicamos em uma de nossas aplicações para limitar a quantidade de elementos em uma List enquanto o usuário utiliza as funcionalidades de Drag & Drop.

Basicamente possuímos duas lista, onde a lista de origem pode possuir diversos elementos e a segunda lista, que receberá os elementos selecionados pelo usuário, deve aceitar uma quantidade máxima de elementos.

Após configurar as propriedades de drag e drop de cada elemento, habilitamos o evento dragDrop na lista destino. Neste evento realizaremos a validação da quantidade máxima aceitável de elementos, através da soma dos elementos já existentes na lista de destino mais a quantidade de elementos que o usuário está tentando adicionar através do drop.

Para a quantidade de elementos já existentes na lista basta obter a propriedade length do dataprovider da list.

var qtdeDestino:int = event.currentTarget.dataProvider.length;

Para a quantidade de elementos que o usuário está tentando adicionar à lista, obtemos a propriedade ‘items’ do dragSource do evento, criando um Array. Em seguida obtemos a propriedade length do Array.

var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
var qtdeOrigem:int = itemsArray.length;

Finalmente basta somar os valores e comparar com a quantidade máxima de elementos desejada. Após a validação apresentamos uma mensagem de alerta para o usuário.

Para que não ocorra de mesmo após exibir a mensagem de alerta os elementos serem inseridos na lista de destino, devemos cancelar o evento de drop para que os elementos selecionados retornem para a lista de origem.

event.preventDefault();
event.target.hideDropFeedback(event);
DragManager.showFeedback(DragManager.NONE);

Abaixo apresento o código completo do exemplo que criei para esta solução:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">

	<mx:Script>
		<![CDATA[
			import mx.managers.DragManager;
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
		
			private function initApp():void {
                lstDe.dataProvider = new XML(getDados()).dado;
                lstPara.dataProvider = new XML(<dados></dados>).dado;
            }
            
            private function getDados():XML {
            	var xmlDados:XML = 	<dados>
										<dado>Linha 1</dado>
										<dado>Linha 2</dado>
										<dado>Linha 3</dado>
										<dado>Linha 4</dado>
										<dado>Linha 5</dado>
										<dado>Linha 6</dado>
										<dado>Linha 7</dado>
										<dado>Linha 8</dado>
										<dado>Linha 9</dado>
										<dado>Linha 10</dado>
									</dados>;
            	return xmlDados;
            }
            
            private function dragDropHandler(event:DragEvent):void {
				
				//Array com elementos que estão sendo movidos
				var itemsArray:Array = event.dragSource.dataForFormat('items') as Array;
				
				//Quantidade de elementos da lista de Origem e Destino
				var qtdeOrigem:int = itemsArray.length;
				var qtdeDestino:int = event.currentTarget.dataProvider.length;
				
				//Verificar quantidade máxima de elementos
				if ((qtdeOrigem + qtdeDestino) > 6) {
					Alert.show("Você excedeu a quantidade máxima de registros!");
					//Cencelar evento de Drag e Drop
					event.preventDefault();
				 	event.target.hideDropFeedback(event);
				 	DragManager.showFeedback(DragManager.NONE);
				}
				
	        } 
			
		]]>
	</mx:Script>
	
	<mx:List x="10" y="10" width="173" height="393" id="lstDe" 
		allowMultipleSelection="true"
        dragEnabled="true"
        dragMoveEnabled="true"/>
	<mx:List x="241" y="10" width="173" height="393" id="lstPara"
		dropEnabled="true"
		dragDrop="dragDropHandler(event);"/>
		
	<mx:Button id="btnReset" 
        label="Reset"
        click="initApp()"
     	x="10" y="411"/>
	
</mx:Application>

Qualquer dúvida não exitem em perguntar!

Abs!!!