Olá Pessoal..
Hoje vou mostrar o exemplo de um simples drag and drop.
Fantástico, pois é um recurso bastante útil, muito legal visualmente e que neste caso possui menos de 30 linhas de código.
Detalharei mais a explicação nas propriedades, o código está com uma explicação muito simples, mais caso você tenha dúvidas ou queira mais detalhamento na explicação, entre em contato comigo.
Neste exemplo, utilizaremos apenas MXML.
Veja o código, e logo abaixo a explicação das propriedades utilizadas.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" width="500" height="400" viewSourceURL="srcview/index.html"> <mx:Style source="css/style.css"/> <!-- Realmente, muito simples, temos duas listas e dentro de cada, respectivamente, um array recheado com os dados. !--> <mx:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" width="82"> <mx:Array> <mx:String>Flex</mx:String> <mx:String>ColdFusion</mx:String> <mx:String>Photoshop</mx:String> <mx:String>Fireworks</mx:String> </mx:Array> </mx:List> <mx:Label text="Arraste entre as listas." color="#000000"/> <mx:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" width="82"> <mx:Array> <mx:String>Dreamweaver</mx:String> <mx:String>Illustrator</mx:String> <mx:String>InDesign</mx:String> </mx:Array> </mx:List> </mx:Application> |
Propriedades:
allowMultipleSelection: Permite mover mais de 1 opção, tanto internamente quanto movendo para outra(s) lista(s).
dropEnabled: Permite “receber” dados vindo de outra(s) lista(s).
dragEnabled: Permite “arrastar” dados para outra(s) lista(s).
dragMoveEnabled: Permite mudar de ordem as informações dentro da lista, e quando “false” realiza uma cópia da opção selecionada.
Veja o exemplo.
Em outros posts teremos exemplos com imagens e mais recursos.
Bons estudos!
Abraços