Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Il drag and drop e la classe DragManager di Flex

Alcune applicazioni della classe DragManager per gestire il drag and drop
Alcune applicazioni della classe DragManager per gestire il drag and drop
Link copiato negli appunti

Le RIA sono applicazioni Web che possiedono le caratteristiche delle normali applicazioni desktop e la possibilità di trascinare gli oggetti da una parte all'altra dello schermo utilizzando il mouse è proprio una di queste caratteristiche. In questo articolo vediamo come implementare il drag and drop nelle nostre applicazioni Web.

Per realizzare questo tutorial utilizziamo il Flex Framework e Flash Builder. Flex infatti mette in campo tre componenti per ili drag and drop:

  • Drag Initiator
  • Drag Source DragProxy
  • Drop Target dropTarget DragSource

Nell'esempio che realizzeremo l'oggetto da spostare sarà un component di tipo Image, si può realizzare il drag and drop anche altri tipi di oggetto, ma è bene ricordare che solo i component che estendono la classe IUIComponent possono essere collegati (bind) agli event listener di drag e drop.

Drag and drop in un singolo contenitore

Per prima cosa apriamo Flex Builder (o Flash Builder) e spostiamo sullo stage un contenitore, nel nostro caso un Canvas, all'interno del quale inseriamo un component di tipo Image. È di fondamentale importanza definire un colore di sfondo per il Canvas, altrimenti non sarà possibile il drop, poichè lo sfondo trasparente non è un adeguato drop target.

Dobbiamo, poi, stabilire le dimensioni del Canvas e la proprietà source del component Image.

Quindi attiviamo i listener per gli eventi di drag e drop sul Canvas e di mouse move sull'immagine. All'evento di mouseMove sull'Image associamo il un metodo onMouseMove, così definito:

In questo metodo vengono definiti il drag initiator e il drag source (creato a partire dal drag initiator) e poi viene invocato il metodo doDrag DragManager

Gli eventi di drag e drop sul canvas saranno intercettati dai metodi onDragEnter onDrop

private function onDragEnter(evt:DragEvent):void
{
  if (evt.dragSource.hasFormat('source_img'))
  {
    DragManager.acceptDragDrop(Canvas(evt.currentTarget));
  }
}

private function onDrop(evt:DragEvent):void
{
  Image(evt.dragInitiator).x = Canvas(evt.currentTarget).mouseX;
  Image(evt.dragInitiator).y = Canvas(evt.currentTarget).mouseY;
}

Il metodo onDragEnter Canvas dragEnter onDragEnter

Il metodo onDrop

Definizione di un drag proxy

Se non esplicitamente specificato, Flex mostrerà il dragProxy di default. Il drag proxy può essere facilmente personalizzato modificando l'invocazione del metodo doDrag.

Per specificare il proxy dobbiamo passare al metodo doDrag alcuni parametri opzionali, nell'ordine:

Parametro Descrizione
dragImage è l'immagine da visualizzare durante il dragging (deve essere un oggetto di tipo Image)
xOffset indica l'offset sull'asse x rispetto all'angolo in alto a sinistra del drag initiator
yOffset indica l'offset sull'asse y rispetto all'angolo in alto a sinistra del drag initiator
alpha valore compreso tra 0 e 1 che indica il grado di opacità dell'immagine (0 è trasparente, 1 è opaco)

xOffset e yOffset sono solitamente numeri negativi e servono per rispettare la posizione iniziale del mouse sull'oggetto trascinato, fino alla fine dello spostamento. Se alpha non è specificato, viene utilizzato il valore di default pari a 0.5.

Modifichiamo il onMouseMove aggiungendo le linee di codice che ci servono a definire il drag proxy:

Nota è necessario stabilire le dimensioni dell'immagine del drag proxy, altrimenti non sarà visualizzata.

Drag and drop con componenti list-based

A differenza degli altri component, quelli basati su List (List, HorizontalList, TileList, Menu, Tree, DataGrid, PrintDataGrid) gestiscono nativamente le funzionalità di drag and drop. L'unica condizione per effettuare il drag and drop è che la struttura dei data provider dei component di partenza e destinazione sia la stessa.

Realizziamo ora un esempio con due component list-based. Per prima cosa trasciniamo due List sullo stage e definiamone le dimensioni. Nel nostro esempio il dataProvider della prima lista è definito manualmente al creationComplete dell'applicazione.

Per definire il drag initiator è necessario impostare a true la proprietà dragEnabled, mentre per definire il dropTarget è necessario impostare a true la proprietà dropEnabled delle List così come mostrato di seguito (file ListDragDrop.mxml).

A questo punto, il drag e drop dalla lista 1 alla lista 2 funziona correttamente, solo che al momento del drop l'oggetto viene copiato nella lista di destinazione. Per evitare la copia ed effettuare solo lo spostamento dell'oggetto è necessario impostare a true dragMoveEnabled dragMoveEnabled CTRL cmd

<mx:List id="lista_partenza" x="0" y="0" width="180" height="230"
         labelField="Nome"
         dragEnabled="true"
         dragMoveEnabled="true" />

Talvolta, i dati possono subire delle modifiche List DataGrid dataProvider

Modifichiamo l'esempio precedente sostituendo la List DataGrid true dropEnabled DataGrid DataProvider List

Osserviamo che all'operazione di drop nel datagrid verranno visualizzate tutte le informazioni riguardanti il singolo oggetto, cosa che non avveniva con la lista.

<mx:DataGrid id="dest_datagrid" x="0" y="0" width="280" height="230"
             dropEnabled="true">
  <mx:columns>
    <mx:DataGridColumn headerText="Nome" dataField="Nome" />
    <mx:DataGridColumn headerText="Cognome" dataField="Cognome" />
    <mx:DataGridColumn headerText="Età" dataField="Eta" />
  </mx:columns>
</mx:DataGrid>

Ti consigliamo anche