Neste tutorial vai ser explicado como utilizar os metodos Drag & Drop no Flex. Dans ce tutoriel sera expliqué comment utiliser les méthodes Drag & Drop dans Flex. Em muitos dos objectos/componentes do flex, estas propriedades estão já implementadas ea sua utilização é bem simples nesses mesmos componentes com suporte nativo Drag & Drop. Dans de nombreux articles de la / des composants de Flex, ces propriétés sont déjà mises en oeuvre et son usage est très simple de ces composants avec support natif Drag & Drop.
As coisas podem ficar um bocado mais complicadas se formos trabalhar com outros componentes, mas este não vai ser o caso. Les choses peuvent obtenir un peu plus compliqué si nous travaillons de concert avec d'autres composants, mais ce ne sera pas le cas. 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: Le tutoriel se rendra ensuite à expliquer comment effectuer un glisser-déposer entre les composants qui sont le support natif de drag & drop, on peut choisir l'un des suivants:

Datagrid
List Liste
HorizontalList
PrintDatagGrid
TileList
Tree Arbre

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: Nous allons maintenant utiliser deux datagrid, et faire un exemple d'un simple système de panier d'achat, la création d'un nouveau projet et de placer le code suivant:

Em que muito possivelmente ficarão com o design grafico como a imagem: Dans cette même éventuellement être avec la conception graphique de l'image:

Parte 1 Partie 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. Notre objectif est de passer datagrid éléments de "marché" de datarid «panier» d'utiliser les méthodes qui peuvent glisser-déposer à partir de la même natifs datagrid, mais pour cela nous devons faire quelques changements dans le code, ce qui indique qu'elles soutiendra ces opérations. Vamos então alterar na datagrid da esquerda (mercado) para isso adicionando o parametro dragEnabled e defini-lo como true.: Nous modifions donc la datagrid la gauche (du marché) pour ce dragEnabled ajoutant le paramètre et la définir en tant que vrai.:

e fazendo o mesmo na datagrid da direita, mas com o parametro dropEnabled : et de faire de même dans datagrid sur le droit, mais avec le paramètre 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. et prêts, nos datagrids sont prêts à envoyer et de recevoir des points, et peut enregistrer et exécuter votre application, vous aurez le drag & drop dans les affaires.

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. Le fonctionnement du drag & drop dans les composants qui ont déjà leur support natif est aussi simple comme cela a été expliqué, mais maintenant, nous allons faire quelque chose de plus élaboré, utilisant le même code. Vamos colocar uma lixeira no nosso layout para poder-mos eliminar items do nosso carrinho de compras. Nous allons mettre une poubelle dans notre mise en page pour le pouvoir-mos supprimer des éléments de notre panier. Para isso a seguir à ultima Pour ce faire, après la dernière colocamos o seguinte: sont les suivantes:

e ficamos com algo muito parecido ao seguinte: et nous obtenons quelque chose de très semblable à la suivante:

Parte 2 Partie 2

Sendo que como uma imagem não têm nativamente suportado o drag & drop temos que arranjar maneira de o fazer. Comme une image n'est pas pris en charge nativement ont le drag & drop, nous devons trouver une façon de le faire. 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: Nous devons d'abord indiquer à l'datagrid qui peuvent également faire l'objet de glisser, et permettra également de sélectionner plusieurs lignes en même temps, pour elle ajouté au DataGrid "panier" 3 paramètres tels que dragEnabled = "true", la allowMultipleSelection = "true" et dragMoveEnabled = "true" obtenir notre datagrid comme ceci:

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 ea 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… Avec ces paramètres indiquent que je suis datagrid (outre plus accepter de chute) est également accepter de glisser et muiltipla sélection d'articles et lorsque le drag & drop ce datagrid à une autre cible, il permettra à votre contenu sélectionné n'est pas déplacé et copié tel qu'il était avant ...

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: Si vous regardez dans les paramètres de la balise mx: Faites glisser l'image il ya des éléments qui nous permettent peut faire l'objet porte sur dargar & drop, et c'est précisément l'une de ces propriétés que nous utilisons, de l'écriture de la balise image de nos ordures, les :
dragEnter=”lidaEnter(event)” dragEnter = "lidaEnter (événement)"

ficando a tag mx:image assim: Obtenir le tag mx: image comme ceci:

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. Ces deux paramètres sont DragDrop dragEnter et les événements qui sont déclenchés quand il est la cible de drag & drop des opérations, dans ce cas, la fonction lidaEnter () est appelée quand un objet cible pour faire glisser passe au-dessus de notre image, ici nous avons à donner à flex est en mesure de la traînée.

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): Tout ce qui reste est la création de la fonction de traiter cet événement lidaEnter spécifiquement l'() pour mettre le code suivant après la ligne 2 (après le 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. Et prêt, nous avons le marché avec notre panier d'achat et des ordures disqualifié pour un ou plusieurs articles de votre panier.

Como podem reparar não têm nenhuma dificuldade, Por isso, usem e abusem! Comment peut réparer n'ont pas de difficulté, je me suis donc l'usage et l'abus!

Código Final: Code final:

Podem ver o resultado final online com o código fonte disponivel aqui Ils peuvent voir le résultat en ligne avec le code source disponible ici

Abraço e espero que seja util e esclarecedor. Hug et j'espère qu'il est utile et instructif.