touch-x

Drag/Swipe Library For Mobile/Desktop Devices

Caveat: This is currently only focused on single touch and swipe(move) actions. Double tab, zoom, 3 finger actions are not covered with this library.

Usage with Webpack, Browserify, & Other Bundlers

If you want to use it with a bundler, install @elementsx/touch-x with npm:

$ npm install @elementsx/touch-x --save-dev

Simply import the module into your bundle:

import {XTouch} from  '@elementsx/touch-x';

Usage with Browser

<script src="//unpkg.com/@elementsx/touch-x"></script>

How to use

Initiate a touch action with new TouchX(cssSelector). This will fire a x-swipe event when the selected area is touched and moves.

Try It The following code is to draw lines on a screen using this library.

// HTML
<div class="area">
  <svg width="100%" height="100%"></svg>
</div>

// Javascript
new TouchX(document.querySelector('.area'));

let lineEl;
document.addEventListener('x-swipe', event => {
  const {type, x1, y1, x2, y2} = event.detail;

  if (type === 'start'){
    lineEl = document.createElementNS("http://www.w3.org/2000/svg", 'line');
    lineEl.setAttribute('x1', x1);
    lineEl.setAttribute('y1', y1);
    lineEl.setAttribute('stroke', 'red')
    document.querySelector('svg').appendChild(lineEl);
  } else if (type === 'move') {
    lineEl.setAttribute('x2', x2);
    lineEl.setAttribute('y2', y2);
  } else if (type === 'cancel') {
    lineEl.remove();
  }
});

x-swipe event detail

| name | description | | --- | --- | | type | x-touch event type. start, move, end or cancel | | x0 | touch start x point. | | y0 | touch start y point.| | x1 | re-calculated touch start x point. It's reset when touch direction changes. | | y1 | re-calculated touch start y point. It's reset when touch direction changes. | | x2 | current touch x point. | | y2 | current touch y point. | | distanceX | distance between x1 and x2 | | distanceY | distance between x1 and x2 | | distance | distance between (x1, y1) and (x2, y2) | | duration | touch duration between two points; (x1, y1) and (x2, y2) | | speed | touch move speed between two points; (x1, y1) and (x2, y2) | | distance0 | distance between (x0, y0) and (x2, y2) | | duration0 | touch duration between two points; (x0, y0) and (x2, y2) | | speed0 | touch move speed between two points; between (x0, y0) and (x2, y2) | | touchStaEl | the element that touch has started from | | orgEvent | original event of touchstart or touchmove or touchend |

Commands For Maintainers

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# build for production with minification
npm run build