Drag & Drop con Actionscript 3.0

Di admin in Actionscript Controls: +-close

Muoviamo gli elementi con il mouse

In questo articolo vedremo una delle possibili soluzioni per realizzare l’effetto drag & drop su un elemento. Gli elementi n questione saranno 20 sprite posizionati a random sullo stage. In ognuno di questi sprite disegneremo un rettangolo che coloreremo con un colore random. Faremo particolare attenzione ad un metodo chiamato updateAfterEvent(), determinante per la fluidità del risultato finale, che per i più impazienti, sarà questo:

Il codice in questione sarà breve. Chiameremo la classe del documento DragDrop, quindi di conseguenza creiamo il file DragDrop in cui inseriremo il seguente codice

DragDrop.as

  package {
    import flash.display.*;
    import flash.events.*; 

    public class DragDrop extends Sprite {
      var object:Sprite;
      var offsetX:Number;
      var offsetY:Number;

      public function DragDrop():void {
        var rettangoli:Array = new Array();
        for (var i:int = 0; i < 20; i++) {
          rettangoli[i] = new Sprite();
          rettangoli[i].graphics.lineStyle(1);
          rettangoli[i].graphics.beginFill(Math.floor(Math.random()*0xFFFFFF), 1);
          rettangoli[i].graphics.drawRect(0, 0, 100, 50);
          rettangoli[i].x = Math.floor(Math.random()*500);
          rettangoli[i].y = Math.floor(Math.random()*400);
          rettangoli[i].addEventListener(MouseEvent.MOUSE_DOWN, drag);
          rettangoli[i].addEventListener(MouseEvent.MOUSE_UP, drop);
          addChild(rettangoli[i]);
        }
      } 

      function drag( event  :  MouseEvent  ):void{
        var highestDepth:uint = numChildren - 1;
        object = event.target as Sprite;
        setChildIndex(object, highestDepth);
        offsetX = mouseX - object.x;
        offsetY = mouseY - object.y;
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
      }

      function drop( event  :  MouseEvent  ):void{
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
      }

      function mouseMoveListener( event  :  MouseEvent  ):void{
        object.x = mouseX - offsetX;
        object.y = mouseY - offsetY;
        event.updateAfterEvent();
      }

    }
  }

Ma vediamolo passo per passo. Dopo aver creato il package importiamo le librerie flash.display e flash.events, le uniche di cui abbiamo bisogno per questo esempio. Creiamo quindi la classe DragDrop che essendo la point of entry estenderà Sprite. La proprietà di cui abbiamo bisogno sono 3, in quanto le uniche cose di cui abbiamo bisogno in maniera globale sono l'oggetto attualmente draggato e gli offset X e Y. Queste 2 variabili equivalgono alla differenza delle cordinate X e Y del mouse con le coordinate X e Y dell'oggetto che vogliamo draggare. Ne abbiamo bisogno per rendere verosimile lo spostamento.

Il costruttore della classe si occupa della creazione a random di 20 rettangoli, e per ognuno di esso mette in ascolto lgli eventi MOUSE_DOWN e MOUSE_UP, che rispettivamente richiameranno i metodi drag e drop.

Il metodo drag rende disponibile la variabile highestDepth, che equivale alla somma di tutti gli elementi presenti sullo sprite sottratto di 1, in quanto questo valore si calcola a partire dallo zero. Quindi attribuisce la profondità all'elemento che abbiamo cliccato ( setChildIndex equivale al settaggio dello z-index nel DOM ). Quindi calcola gli offset X e Y di cui abbiamo parlato prima ed infine registra lo stage in ascolto con l'evento MOUSE_MOVE.

D'ora in avanti, finchè avremo il tasto sinistro del mouse premuto, l'elemento si muoverà seguendo il nostro cursore: questo comportamento è dato dal metodo richiamato dall'evento MOUSE_MOVE, ovvero mouseMoveListener. Questo infatti setta le coordinate dell'elemento attualmente draggato uguali alle coordinate del mouse sottratte dei relativi offsets.

Da notare l'importante metodo updateAfterEvent(). Questo metodo, come potete vedere, appartiene all'oggetto evento, la sua funzionalità è determinante in quanto aggiorna la visualizzazione a prescindere dalla frequenza di fotogrammi al secondo impostata per il filmato. Per comprendere in fondo la sua utilità vi consiglio di commentare temporaneamente event.updateAfterEvent(); e provare a compilare il filmato.

Per finire giungiamo al metodo drop, che semplicemente rimuove lo stage dall'ascolto con l'evento MOUSE_MOVE.

Si conclude qui questo tutorial, comment, share and rate!