Flash  »  Articoli  »  Flex 

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: l'operazione di drag and drop inizia quando l'utente seleziona con il mouse l'oggetto da spostare. L'oggetto selezionato rappresenta il drag initiator
• Drag Source: contiene informazioni riguardo il component che si sta spostando. Inoltre contiene il DragProxy che rappresenta l'immagine visualizzata durante il trascinamento
• Drop Target: il drag and drop termina quando viene rilasciato il mouse, alla fine dello spostamento. Il componente all'interno del quale termina il trascinamento è chiamato dropTarget. Quest'ultimo effettua una serie di controlli sul DragSource per garantire che il formato dei dati sia compatibile. Se il drop target stabilisce che il formato dei dati non è accettabile, annulla l'operazione di drop

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:

private function onMouseMove(evt:MouseEvent):void
{
  var initiator:Image = Image(evt.currentTarget);
  var source:DragSource = new DragSource();
  source.addData(initiator, 'source_img');
  
  DragManager.doDrag(initiator, source, evt);
}

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 della classe DragManager che ha il compito di iniziare l'operazione di drag and drop.

Gli eventi di drag e drop sul canvas saranno intercettati dai metodi onDragEnter e onDrop che definiamo nel modo seguente:

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 controlla il formato del drag source e definisce il drop target all'interno del Canvas che abbiamo creato prima. L'evento dragEnter occorre continuamente durante il drag e, quindi, il gestore onDragEnter viene eseguito ripetutamente finchè non viene rilasciato il pulsante del mouse.

Il metodo onDrop, invece, assegna al drag initiator le nuove coordinate che corrispondono a quelle del mouse al momento del drop event. Il codice completo dell'esempio è nel file allegato.

Altri articoli

Altre guide

Altre newsletter