Dall'archivio script > HTML5

Implementare le gesture multi-touch in HTML5 con HammerJS

di Andrea ColaciAndrea Colaci,

Negli script precedenti abbiamo illustrato come sia possibile, anche dal browser, implementare le gesture come ad esempio il tap, tap-hold e swipe.

https://www.html5italia.com/script/26/Gestire-Eventi-Tipo-Touch-HTML5.aspx
https://www.html5italia.com/script/27/Eventi-Tocco-Personalizzati-HTML5.aspx

I più "pigri" potrebbero trovare migliorabile e poco intuitiva l'operatività illustrata in questi script, accogliendo con favore librerie che, come HammerJS, possono facilitare il lavoro e ridurre il codice necessario per implementare le gesture.

HammerJS è una libreria Javascript, disponibile qui:http://eightmedia.github.com/hammer.js/, che vanta le seguenti caratteristiche:

- gestione semplificata degli eventi touch e soprattutto, multi-touch!
- facilmente integrabile
- peso ridotto a 2kb
- disponibile come plugin di jQuery

Ecco come nella pratica, HammerJS consente di implementare le gesture Tap, Double Tap, Swipe, Hold, Transform/Pinch, Drag in un sito web (o mobile web):

HTML
<!doctype html>
<html>
<head>
</head>
<body>
<div id="touchArea"></div>
<div id="logArea"></div>
<script src="../query.min.js"></script>
<script src="../hammer.js"></script>
<script src="../jquery.hammer.js"></script>
</body>
</html>

JavaScript
    var log = $("#logArea");
    function writeLog(str) {
        log.prepend(str +"<br>");
    }

    $("#touchArea").hammer({
            prevent_default: false,
            drag_vertical: false
        })
        .bind("hold tap doubletap transformstart transform transformend dragstart drag dragend release swipe", function(event) {
            writeLog(event.type);
            //disponibili anche:
            //event.direction (right, left...)
            //event.distance (per valutare l'intervallo in pixel interessato dalla gesture)
        });

E' evidente che, utilizzando questa libreria, la sintassi risulta semplificata ed allo stesso tempo la varietà delle gesture supportate copre la maggioranza degli scenari touch-based.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi