Comment mettre en œuvre une fonctionnalité de glisser-déposer personnalisée dans un contrôle de liste Flex ?

Question

Flex intègre la fonction glisser-déposer pour les contrôles de liste et vous permet de la remplacer. Mais les exemples n'en parlent pas. La fonctionnalité intégrée fait automatiquement glisser l'élément de la liste. Si vous voulez y déroger, vous constaterez que les gestionnaires sont configurés sur la liste elle-même. Ce que je veux faire, c'est que ma TileList affiche de petites vignettes d'éléments que je peux faire glisser sur une grande toile. Lorsque je fais glisser un élément de la liste, le proxy de glissement doit être une image différente.

J'ai donc suivi la technique proposée et cela ne fonctionne que si je définis explicitement la largeur et la hauteur de l'image proxy. Pourquoi ?

Answer 1

Ce n'est pas évident tant que vous ne l'avez pas essayé =) Je me suis débattu avec la même chose il y a quelques semaines à peine. Voici la solution que j'ai trouvée :

La liste :

<List>
  <mouseDown>onListMouseDown(event)</mouseDown>
</Tree>

Le gestionnaire de la souris vers le bas :

private function onMouseDown( event : MouseEvent ) : void {
  var list : List = List(event.currentTarget);

  // the data of the clicked row, change the name of the class to your own
  var item : MyDataType = MyDataType(list.selectedItem);

  var source : DragSource = new DragSource();

  // MyAwsomeDragFormat is the key that you will retrieve the data by in the
  // component that handles the drop
  source.addData(item, "MyAwsomeDragFormat");

  // this is the component that will be shown as the drag proxy image
  var dragView : UIComponent = new Image();

  // set the source of the image to a bigger version here
  dragView.source = getABiggerImage(item);

  // get hold of the renderer of the clicked row, to use as the drag initiator
  var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));

  DragManager.doDrag(
    rowRenderer,
    source,
    event,
    dragView
  );
}

Cela permettra de lancer le déplacement lorsque l'utilisateur cliquera sur un élément de la liste. Remarquez que je ne mets pas dragEnabled et les autres propriétés liées au drag sur la liste puisque je gère tout cela moi-même.

Il peut être utile de l'ajouter au début du gestionnaire d'événements :

if ( event.target is ScrollThumb || event.target is Button ) {
  return;
}

Juste pour court-circuiter si l'utilisateur clique quelque part dans la barre de défilement. Ce n'est pas très élégant mais ça fait l'affaire.

Answer 2

J'ai trouvé une réponse plus simple aquí . Cet exemple étend un contrôle DataGrid, mais vous pouvez faire la même chose avec un contrôle List. Dans mon cas, j'utilise une source d'image au lieu de la classe :

public class CustomDragList extends List {

    [Bindable]
    public var dragProxyImageSource:Object;

    override protected function get dragImage():IUIComponent {
        var image:Image = new Image();
        image.width = 50;
        image.height = 50;
        image.source = dragProxyImageSource;
        image.owner = this;
        return image;
    }
}

Puis utilisez cette liste personnalisée comme ceci :

<control:CustomDragList
    allowMultipleSelection="true"
    dragEnabled="true" 
    dragProxyImageSource="{someImageSource}"
    dragStart="onDragStart(event)"/>

Où "someImageSource" peut être tout ce que vous utilisez normalement comme source d'image (intégrée, liée, etc.).