Publié par

Il y a 11 ans -

Temps de lecture 4 minutes

Drag and Drop Flex

Après avoir étudié dans un précédent billet la mise en place d’une galerie d’image, nous allons voir le drag and drop. Tous les composants Flex supportent le drag and drop, mais certains composants dont le Tree, la List et le DataGrid possèdent quelques options supplémentaires.
A travers ce billet, nous allons mettre en place le drag and drop pour le composant List.

Jeu de données


    
    
    
    
    
    
    
        

Nous créons une liste (avec un id='sports') composée d’objets qui ont comme attribut label.

Simple drag

DragAndDrop.mxml


        

            

            

        

        
            

            

        

Cet écran est composé du composant Panel dans lequel se trouvent deux composants (layout) VBox. Ce dernier permet d’organiser les composants verticalement.
Etudions les attributs du composant List:

  • id: id du composant
  • dataProvider: la liste précédemment définie et identifiée par son id (ie sports)
  • allowMultipleSelection: permet de sélectionner plusieurs lignes
  • dragEnabled: les éléments de la liste peuvent être « dragé »
  • dropEnabled: la liste peut recevoir de nouveaux éléments

Le résultat:

Nous voyons donc que la première liste (id='provider') permet de sélectionner les éléments et de les placer dans la deuxième liste (id='selected'). Cependant, vous remarquerez que l’élément placé dans la deuxième liste est toujours présent dans la liste d’origine. Améliorons ce drag and drop.

Drag and drop

DragAndDropMoveEnabled.mxml


        

            

            

        

        
            

            

        

L’attribut dragMoveEnabled a été ajouté à la première liste et permet de déplacer les éléments dans la deuxième liste.

Le résultat:

Drag and drop des deux listes

Nous allons encore améliorer notre exemple en faisant en sorte que les éléments puissent être déplacés dans les deux listes:


        

            

            

        

        
            

            

        

Les attributs précédemment décrits (dragEnabled, dragMoveEnabled, dropEnabled) ont été ajoutés à chacune des listes. Dorénavant, il est possible de déplacer les éléments dans la deuxième liste, et de les replacer dans la première liste.

Le résultat:

Drag and drop d’images

Nous allons maintenant voir le drag and drop avec des images. Pour l’exemple, nous allons prendre le jeu de données suivant:

[Embed(source='images/paysage1.jpg')]
public var paysage1:Class;
            
[Embed(source='images/paysage2.jpg')]
public var paysage2:Class;
            
[Embed(source='images/paysage3.jpg')]
public var paysage3:Class;
            
[Embed(source='images/paysage4.jpg')]
public var paysage4:Class;

DragAndDropImages.mxml

 


 

 


ActionScript

// initiates the drag-and-drop operation.
private function mouseOverHandler(event:MouseEvent):void 
{                
    var dragInitiator:Image = event.currentTarget as Image;
    var ds:DragSource = new DragSource();
    ds.addData(dragInitiator, "img");               

    var imageProxy:Image = new Image();
    imageProxy.source = event.currentTarget.source;
    imageProxy.height=15;
    imageProxy.width=15;                
    DragManager.doDrag(dragInitiator, ds, event, imageProxy);
}
            
// enables dropping.
private function dragEnterHandler(event:DragEvent):void {
    if (event.dragSource.hasFormat("img"))
    {
        DragManager.acceptDragDrop(Canvas(event.currentTarget));
    }
}

// The dragDrop event handler for the Canvas container
// sets the Image control's position by 
// "dropping" it in its new location.
private function dragDropHandler(event:DragEvent):void {
     Image(event.dragInitiator).x = Canvas(event.currentTarget).mouseX;
     Image(event.dragInitiator).y = 
     Canvas(event.currentTarget).mouseY;
}

Dans cet exemple, chacun des composants Image ont les attributs suivants :

  • id: id de l’image.
  • source: la source de l’image.
  • x, y: coordonnées pour l’initialisation du placement de l’image.
  • mouseMove: appelle la fonction mouseOverHandler(event).

Cette dernière fonction se décompose de la manière suivante :

  • on indique sur quel composant le drag and drop va avoir lieu:
var dragInitiator:Image = event.currentTarget as Image;
  • les données à déplacer, içi l’image:
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "img");
  • definition d’un drag proxy (optionnel). Dans notre exemple nous avons pris l’image comme drag proxy:
var imageProxy:Image = new Image();
imageProxy.source = event.currentTarget.source;
  • initialisation du drag and drop:
DragManager.doDrag(dragInitiator, ds, event, imageProxy);

Ensuite, il y a un composant Canvas dans lequel il est possible de glisser/déposer les images. Afin que ce composant accepte le drag and drop, deux attributs ont été ajoutés :

  • dragEnter appelle la méthode dragEnterHandler:
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
      {
         DragManager.acceptDragDrop(Canvas(event.currentTarget));
      }
}

Si le drag and drop est effectué sur une image, alors le composant Canvas accepte l’opération.

  • dragDrop appelle la méthode dragDropHandler:
private function dragDropHandler(event:DragEvent):void {
    Image(event.dragInitiator).x = Canvas(event.currentTarget).mouseX - 70;
    Image(event.dragInitiator).y = Canvas(event.currentTarget).mouseY - 50;
}

Lorsque l’image est déplacée (drop), on calcule ses nouvelles coordonnées.

Le résultat:

Vous pouvez télécharger les sources sur le SVN de Xebia France.

Références

Publié par

Publié par Nicolas Jozwiak

Nicolas est delivery manager disposant de 12 ans d’expérience en conception et développement. Son parcours chez un éditeur avant son entrée chez Xebia lui a notamment permis de développer de solides compétences dans le domaine de la qualité et de l’industrialisation (tests, intégration continue, gestion de configuration, contrôle qualité). Bénéficiant d’une expérience très solide de mise en place des méthodes agiles et d’accompagnement d’équipes sur le terrain, il s’attache à mettre à profit quotidiennement son expérience qui est reconnue pour son approche pragmatique, proactive et pédagogique.

Commentaire

3 réponses pour " Drag and Drop Flex "

  1. Publié par , Il y a 11 ans

    Sympa ce post qui montre le support direct de Drag & Drop pour les composants DnD-enabled comme les List, DataGrid, Tree. Et qui montre ensuite comment faire intervenir le DragManager quand il s’agit d’une Image.

    Dans l’exemple de l’image ci-dessus, au moment du Drop, l’image ne reste pas à l’endoit naturel. Voici un billet qui propose un complément sur ce point : http://flex.scoutant.org/index.php?post/2008/10/No-Move-API-for-Flex-Falling-back-Drag-Drop-API

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.