Tap, swipe e drag’n drop, gli eventi legati alle gesture

5 gennaio 2016

Ionic consente la gestione delle tipiche gesture mobile mettendo a disposizione una serie di direttive.

on-tap

Ad esempio, per intercettare il tocco delle dita su un elemento dell’interfaccia grafica possiamo utilizzare la direttiva on-tap:

<button on-tap="elabora()">Elabora</button>

on-tap vs onclick

A prima vista la direttiva on-tap potrebbe sembrare una duplicazione della direttiva ng-click. In realtà c’è una sottile differenza di comportamento tra le due direttive dipendente dal contesto mobile in cui opera Ionic.

In linea di massima potremmo dire che l’uso di ng-click sia sufficiente per catturare il tocco delle dita sullo schermo, dal momento che esso viene assimilato al clic del mouse. Tuttavia, come descritto nel dettaglio dal team di Ionic, i browser mobile aggiungono in genere un ritardo di circa 300 ms prima di passare l’evento all’applicazione. Questo ritardo si rende necessario per poter eventualmente individuare un secondo tocco che potrebbe voler significare l’intenzione di fare uno zoom della pagina corrente. In ogni caso l’introduzione di questo delay rende di fatto meno responsive le app mobile ibride rispetto alle native. La direttiva on-tap è ottimizzata per ridurre l’impatto di tale ritardo avvicinando la responsività dell’applicazione ibrida a quella nativa.

Altre direttive touch

Oltre alla direttiva on-tap possiamo utilizzare le direttive:

DirettivaDescrizione
on-double-tapserve a individuare il doppio tocco sullo schermo
on-touch
on-release
consentono rispettivamente di individuare l’inizio e la fine del contatto del dito sullo schermo
on-holdindividua un tocco prolungato sullo schermo, generalmente superiore a 500 ms

Direttive di gesture, drag’n’drop e swipe

Oltre alle direttive che individuano il tocco delle dita sullo schermo, possiamo utilizzare un insieme di direttive che consentono di individuare il trascinamento di elementi.

DirettivaDescrizione
on-dragindividua un generico trascinamento
on-drag-up
on-drag-right
on-drag-down
on-drag-left
consentono di individuare il trascinamento nelle quattro direzioni

Per le direttive di swiping abbiamo una analoga serie di direttive:

DirettivaDescrizione
on-swipeswipe generico
on-swipe-up
on-swipe-right
on-swipe-down
on-swipe-left
scorrimento del dito nelle quattro direzioni

$ionicGesture

Oltre all’approccio di gestione delle gesture tramite direttive, Ionic prevede anche l’associazione da codice di un gestore ad un evento. L’associazione può essere effettuata tramite il servizio $ionicGesture. Ad esempio, il seguente codice definisce una direttiva personalizzata che applica una classe CSS in corrispondenza dell’evento hold:

myApp.directive('onHoldClass', function($ionicGesture) { 
  return { 
    restrict: 'A', 
    link: function($scope, $element, $attr) { 
      $ionicGesture.on('hold', function(e) { 
		$element.addClass($attr.onHoldClass); 
      	}, $element);    
    } 
  } 
}); 

Tutte le lezioni

1 ... 14 15 16 ... 29

Se vuoi aggiornamenti su Tap, swipe e drag'n drop, gli eventi legati alle gesture inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Tap, swipe e drag'n drop, gli eventi legati alle gesture

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing