Flex; Drag & Drop Explicado.

Flex; Drag & Drop Explicado.

Neste tutorial vai ser explicado como utilizar os metodos Drag & Drop no Flex. Em muitos dos objectos/componentes do flex, estas propriedades estão já implementadas e a sua utilização é bem simples nesses mesmos componentes com suporte nativo Drag & Drop.
As coisas podem ficar um bocado mais complicadas se formos trabalhar com outros componentes, mas este não vai ser o caso. O tutorial vai então passar a explicar como efectuar um Drag & Drop entre e componentes que já têm o suporte nativo drag & drop, podemos escolher um dos seguintes:

Datagrid
List
HorizontalList
PrintDatagGrid
TileList
Tree

Vamos então usar neste momento duas datagrid’s, e fazer um exemplo de um simples sistema de carrinho de compras, criando um novo projecto e colocando o código seguinte:






















Em que muito possivelmente ficarão com o design grafico como a imagem:

Parte 1

Parte 1

 
O nosso objectivo é passar elementos da datagrid “Mercado” para a datarid “Carrinho de compras”, para isso podemos usar os metodos drag & drop nativos destas mesmas datagrid’s, mas para isso temos que efectuar algumas alterações no código, indicando que eles vão suportar operações desse tipo. Vamos então alterar na datagrid da esquerda (mercado) para isso adicionando o parametro dragEnabled e defini-lo como true.:


e fazendo o mesmo na datagrid da direita, mas com o parametro dropEnabled:



e pronto, as nossas datagrids estão prontas a enviar e receber items, e podem salvar e correr a vossa aplicação que verão já o drag & drop em funcionamento.

O funcionamento do drag & drop em componentes que já têm o seu suporte nativo é tão simples como aqui foi explicado, mas vamos agora fazer algo mais elaborado, usando o mesmo código. Vamos colocar uma lixeira no nosso layout para poder-mos eliminar items do nosso carrinho de compras. Para isso a seguir à ultima colocamos o seguinte:



e ficamos com algo muito parecido ao seguinte:

Parte 2

Parte 2

Sendo que como uma imagem não têm nativamente suportado o drag & drop temos que arranjar maneira de o fazer. Primeiro temos que indicar à datagrid que também pode ser objecto de drag, e vamos também permitir selecionar varias linhas ao mesmo tempo, para isso acrescentamos na datagrid “carrinho” 3 parametros como o dragEnabled=”true” , o allowMultipleSelection=”true” e dragMoveEnabled=”true” ficando a nossa datagrid assim:



Com estes parametros estou a indicar que essa datagrid (alem de já aceitar drop) está a aceitar drag também, bem como muiltipla selecção de items e a quando do drag&drop dessa datagrid para outro alvo, ela vai permiter que o seu conteudo selecionado seja movido e não copiado como acontecia antes…

Se repararem nos parametros da tag mx:image existem alguns elementos Drag, que permitem que nós possamos fazer com que o objecto lide com darg & drop, e é precisamente uma dessas propriedades que vamos utilizar, escrevendo na tag da nossa imagem lixeira, o seguinte:
dragEnter=”lidaEnter(event)”

ficando a tag mx:image assim:



Estes dois parametros dragEnter e dragDrop são eventos que são disparados quando o objecto é alvo de operações drag&drop, neste caso a função lidaEnter() será chamada quando um objecto alvo de drag passar em cima da nossa imagem, aqui temos que indicar ao flex que ela se encontra apta para drag.

Falta apenas criar a funçao para lidar com este evento, mais precisamente a lidaEnter() para isso colocamos o seguinte código logo a seguir à 2 linha (a seguir à tag mx:application):



E pronto, temos o nosso Mercado com carrinho de compras e lixeira para eleminar um ou mais items do carrinho de compras.

Como podem reparar não têm nenhuma dificuldade, Por isso, usem e abusem!

Código Final:























Podem ver o resultado final online com o código fonte disponivel aqui

Abraço e espero que seja util e esclarecedor.


14 comments

add yours
  • George August 9, 2008

    Valeu Mario!!
    Cara , eu tava procurando por isto faz tempo!! E nao tinha encontrado nada legal.

    Parabens pelos seus tutoriais e pela iniciativa de contribuir , continue assim!!

  • Mário Santos August 9, 2008

    Oupa George, ainda bem que ajudou…

    Obrigado..

    Abraço.

  • janderson August 13, 2008

    Muito bom, gostei do artigo, me deu ideia para uma tela que eu estava fazendo em flex, acabou que não consegui finalizar, no caso o meu problema e que as colunas do outro grid(drop) por necessidade são labelfunctin e não dataField, neste caso não funcionou, tem alguma dica?

  • Mário Santos August 14, 2008

    Boas janderson, mas voce usa uma labelFunction para que? nunca testei assim (mas deverá funcionar), mas penso que em vez de label function pode usar um item renderer que assim deverá funcionar… mas explique melhor o que faz a sua label function, e se esta está apenas na datagrid ou também em cada coluna…

    Para optimizar o conteudo da sua grid (drop) pode usar o dragDrop=”função(event)” para optimizar o seu conteudo…

    veja:
    http://blog.flexmonkeypatches.com/2008/03/24/nested-item-renderers-with-scrollbars-and-drag-and-drop-enabled-scroll-dont-drag-please/

    e o melhor exemplo:
    http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/

    Tente explicar um pouco melhor…

    Abraço.

  • janderson August 14, 2008

    Mário, vlw pela atenção, eu até abrir um tópico no forum do flexbrasil, acho que lá expliquei melhor o que eu preciso.

    http://forum.flexbrasil.com.br/viewtopic.php?f=4&t=532

    a tela é a seguinte, formação de preço, quando o cara arrastar uma tabela de preço para o grid onde tem o preco do produto, vou gravar no banco essa tabela de preco para esse produto, e logo em seguida listar essa tabela já com o valor sugerido de venda. mais para isso, tenho que verificar se a tabela já não foi cadastrada por exemplo, por isso preciso “interceptar” o evento, para fazer algumas verificações e calculos.

    Vlw.

  • janderson August 14, 2008

    ah! e vlw pelo os links, vou estudar o item rederer e analisar melhor como funciona, obrigado

  • Brian August 16, 2008

    Muito obrigado por compartilhar seu conhecimento gratuitamente, foi de grande utilidade.
    Só tenho uma dúvida, há algum maneira de fazer funcionar no Opera ?
    Mais uma vez, muito obrigado.

  • Mário Santos August 17, 2008

    Ola Brian, não funciona no Opera? isso é muito estranho… não tenho conhecimento de tal problema… mas dá problema apenas nesse exemplo ? ou já teve problemas no flex antes ?

    Cumprimentos.

  • Brian August 19, 2008

    Olá, Mário. Ao fazer esse seu exemplo deu problema no Opera mas nos outros browsers funcionava normalmente. Então refiz ele (sem copiar o código, mas fazendo a mesma coisa) e funcionou perfeitamente em todos os browsers, com um pequeno detalhe: Se, por exemplo, eu copiar a pasta onde o arquivo está salvo e passar para outro computador, ou até mesmo colar em outro diretório do meu computador, começa a dar um problema. O drag and drop entre Mercado e Carrinho funciona mas ao tentar arrastar do carrinho para a lixeira, simplismente não vai. Isso acontece em todos os browsers, exeto no Internet explorer.

    Outro problema, fora do contexto, com o Opera não estou conseguindo deixar comentários aqui.

    Muito obrigado pela atenção, continue com o ótimo trabalho.

  • Mário Santos August 20, 2008

    Bem Brian, me deixou de boca aberta, nunca tinha passado por tal coisa… mas dá algum erro ?

    Quanto aos comentários, talvez não tenha o javascript activo no Opera, já que para deixar comentários necessita do javascript autorizado a correr…

    Abraço.

  • Brian August 20, 2008

    Não, nenhum erro, mas ao arrastar do carrinho para a lixeira o item retorna ao carrinho, como se a lixeira não estivesse abilitada a recebê-lo.

    Eu verifiquei e o javascript está abilitado no Opera, realmente muito estranho.
    Mesmo assim, obrigado pela ajuda.
    Abraço.

  • Brian August 20, 2008

    Consegui -com ajuda- descobrir o que estava acontecendo. Eu havia deixado a lixeira estática, adicionei-a com Embed e funcionou. Erros de principiante…
    Obrigado pela atenção.

  • Mário Santos August 20, 2008

    Humm… o meu exemplo usa a lixeira sem ser embed… estranho, mas ainda bem que funcionou.. :)

    Abraço.

  • Amaury December 14, 2010

    Muito bom esse tutorial. Parabéns!
    Gostaria de saber se tem como inibir o arrasto de um item ja existente no carrinho.
    Obrigado. Abraços.

Leave a Comment

Post