ZingFinger

ZingFinger Super tiny size multi-touch gestures library for the web.

Enhanced Edition: add singlePinch singleRotate singleRotate

Preview

You can touch this → Demo example

Usage

NPM

Install the library with npm into your local modules directory:

npm install zingfinger --save

CDN

JavaScript

var af = new ZingFinger(element, {
  touchStart: function () {},
  touchMove: function () {},
  touchEnd: function () {},
  touchCancel: function () {},
  multipointStart: function () {},
  multipointEnd: function () {},
  tap: function () {},
  doubleTap: function () {},
  longTap: function () {},
  singleTap: function () {},
  rotate: function (evt) {
    console.log(evt.angle);
  },
  pinch: function (evt) {
    console.log(evt.zoom);
  },
  pressMove: function (evt) {
    console.log(evt.deltaX);
    console.log(evt.deltaY);
  },
  swipe: function (evt) {
    console.log("swipe" + evt.direction);
  },
  singlePinch: function (evt) {
    console.log(evt.zoom);
  },
  singleRotate: function (evt) {
    console.log(evt.angle);
  },
});

Vue

// JavaScript
Vue.use(ZingFingerVue); // use ZingFingerVue's plugin
var h = new Vue({
    el: '#el',
    methods: {
        tap: function() { console.log('onTap'); }
        ...
    }
});

// import
import Vue from "vue";
import ZingFinger from "zingfinger";
import ZingFingerPlugin from "zingfinger/plugin/vue/zingfinger";
Vue.use(ZingFingerPlugin, {
  ZingFinger,
});

<div id="cnt">
  <div v-finger:tap="tap" v-finger:long-tap="longTap" ...>
    <div>the element that you want to bind event</div>
  </div>
</div>

React

Expect to contribute

Reference

• AlloyFinger
• css3transform

License

This content is released under the MIT License.