Detect tap and swipe gestures over elements.

Try me!

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="//genielabs.github.io/zuix/js/zuix.min.js"></script>

2. Load the gesture helper on the target element

Add the data-ui-load attribute to the element you want to detect gesture on

<div data-ui-load="@lib/controllers/gesture_helper"
     data-ui-options="gesture_options">
    
</div>

Callbacks will receive the tp (TouchPointer) parameter

tp = {
  // time frame
  startTime,
  endTime,
  // initial touch position
  startX,
  startY,
  // relative movement
  shiftX,
  shiftY,
  // actual direction, speed, position
  direction, // 'left' | 'right' | 'up' | 'down'
  velocity,
  x: x,
  y: y,
  // original event + cancel method
  event,
  cancel()
};

Option attributes

Source code

Source code is available in the lib/controllers folder of zKit repository.