Lavora con noi

ASP.Net

Siti tematici

Pagine:

RSS Download

Drag&Drop con Silverlight

di: Gianni Marzaloni 16 Gennaio 2008

Dov'è il cestino?

Dobbiamo indicare alla nostra applicazione la posizione del cestino, per poter così effettuare una certa operazione se una voce viene rilasciata su di esso oppure no. Per conoscere la posizione del cestino è sufficiente leggere il valore delle proprietà Canvas.Top e Canvas.Left, ovvero le sue coordinate relative al pannello. Aggiungiamo quindi qualche riga in fase di Load della pagina.

// preparo il cestino
cestino = sl.content.FindName("cestino");
cestino_x = cestino.getValue("Canvas.Left");
cestino_y = cestino.getValue("Canvas.Top");

Nota: queste variabili sono richiamabili ovunque nell'applicazione.

Ora che ne conosciamo le coordinate, possiamo creare una funzioncina per capire se ci troviamo sopra il cestino o meno.

Listato 9. Verifica della collisione con il cestino

function isOnCestino(x, y)
{
  // verifico se le coordinate correnti si trovano sul cestino o meno
  if (
      (x >= cestino_x && x <= cestino_x+(cestino.width)) &&
      (y >= cestino_y && y <= cestino_y+(cestino.height))
  ) return true;
  else return false;
}

Se la coordinata x si trova tra il primo pixel (cestino_x) e l'ultimo (cestino_x + la larghezza dell'immagine del cestino) e la stessa cosa vale per la coordinata y, allora ci troviamo all'interno del cestino.

Fatto questo, ritorniamo sull'evento di rilascio pulsante del mouse (onMouseButtonLeftUp) ed integriamo il codice appena creato:

Listato 10. Funzione di rilascio del mouse

Come prima cosa catturiamo la posizione corrente del puntatore, poi interrompiamo il capture. Subito dopo, verifichiamo se l'oggetto (sender, non scordiamoci) si trova o meno sul cestino. Se no, impostiamo la posizione originale dell'oggetto (che avevamo indicato con el_left e el_top).

Se invece l'oggetto si trova sul cestino, facciamo apparire un messaggio di conferma per la cancellazione. Se la conferma non viene data, allora riposizioniamo l'oggetto altrimenti effettuiamo la cancellazione nell'array messaggi precedentemente inizializzato. La cancellazione può essere eseguita mediante l'indice dell'oggetto nell'array. Visto che era stato dinamicamente nominato come tbX (dove X è l'indice), con un semplice replace per eliminare le lettere tb e l'utilizzo della funzione JavaScript splice(), il gioco è fatto.

A questo punto non resta che testare la nostra applicazione. Si potrà facilmente notare che le voci ora sono trascinabili e se vengono rilasciate sul cestino, apparirà il messaggio di conferma!

Figura 5. Conferma di cancellazione

Rimane solo una cosa da fare: rendere leggermente più interattivo il cestino.. magari evidenziandolo quando un oggetto si trova sopra di esso. Potremmo gestire gli eventi onMouseEnter e onMouseLeave dell'oggetto cestino, ma il capture che viene attivato disabilita questi eventi. È quindi necessario usare il codice che abbiamo già preparato ed implementare un paio di semplici righe. Il nostro obiettivo è l'evento onMouseMove:

Listato 11. Creare l'effetto di "over"

function textBlock_onMouseMove(sender, mouseEventArgs)
{
  if (sender.captureMouse())
  {
    // prendo la posizione corrente del puntatore
    var x = mouseEventArgs.getPosition(null).x;
    var y = mouseEventArgs.getPosition(null).y;

    // sposto l'oggetto seguendo il mouse
    sender.setValue("Canvas.Left", x);
    sender.setValue("Canvas.Top", y);

    // controllo se sono sopra il cestino
    if (isOnCestino(x,y)) sl.content.FindName("cestino").source = "img/cestino_over.png";
    else sl.content.FindName("cestino").source = "img/cestino.png";
  }
}