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!!!
(emilioParme){} 