About Libraries API GitHub
Status
- Home
- Libraries
- jquery.event.swipe
jQuery special events for the gestures swipeleft, swiperight, swipeup and swipedown.
448
GitHub
WTFPL licensed
//github.com/stephband/jquery.event.swipe
Tags: touch, special, event, swipe
Version
0.5.4
Asset Type
All
- //cdnjs.cloudflare.com/ajax/libs/jquery.event.swipe/0.5.4/jquery.event.swipe.js
- //cdnjs.cloudflare.com/ajax/libs/jquery.event.swipe/0.5.4/jquery.event.swipe.min.js
Help support cdnjs
You can contribute on GitHub to help make cdnjs sustainable! Or, donate $5 to cdnjs via Open Collective or Patreon.
Demo page
Usage
jquery.swipe.js requires jquery.touch.js on the same page.
Use the following code to add swipe handler to a jQuery object.
$("#touch-target").swipe(function(direction) { // your handler code });Options
Options can be passed via an optional argument.
$("#touch-target").swipe( function(direction) { // your handler code }, { preventDefault: true, mouse: true, pen: true, distance: 50 });preventDefault | boolean | true | prevent default click/touch handlers |
mouse | boolean | true | Whether swipe event should be triggered from mouse events. |
pen | boolean | true | Whether swipe event should be triggered from pen input. |
distance | number | 50 | The distance for a touch point to travel before triggering a swipe. |
The handler argument
A direction argument will be passed into the handler function when it's called.
It will be a string type and have one of the eight values representing the direction of the swipe. The possible values are "left", "upleft", "up", "upright", "right", "downright", "down" or "downleft".
Description
Fires when the user horizontally drag more than 30px over an element using id of the page to specify an event and on() method attaches the event handlers.
Example
Following example describes the use of swipe event in jQuery Mobile Framework.
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as jqm_touch_swipe_event.html file in your server root folder.
Open this HTML file as //localhost/jqm_touch_swipe_event.html and the following output will be displayed.
jquery_mobile_events.htm
jQuery
[jQuery] jQuery swipe event
모바일 기기에서 좌우로 swipe에 대응하는 이벤트가 필요하게 됐다. jQuery Mobile 등의 라이브러리를 사용하면 되겠지만 단지 swipe 이벤트때문에 덩치가 큰 라이브러리를 사용하는 비효율적인 것 같아 다른 jQuery 플러그인을 찾아보니 아래와 같은 플러그인이 존재했다.
jQuery.event.move
jQuery special events movestart, move and moveend for tracking touch and mouse moves, throttled to browser animation frames.
jQuery.event.swipe
jQuery special events for the gestures swipeleft, swiperight, swipeup and swipedown.
두 개의 플러그인을 이용하면 jQuery Mobile을 이용하지 않고 swipe 이벤트를 사용할 수 있게 된다. 한가지 사용 상의 주의점이 swipe 이벤트를 적용하게 되면 scroll 이벤트를 사용할 수 없게 된다. swipe 이벤트와 scroll 이벤트를 동시에 사용하기 위해서는 아래 코드를 추가해줘야 한다.
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls
normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
위 코도를 swipe 이벤트를 사용하는 페이지에 추가해주면 scroll 이벤트도 사용할 수 있게 된다. 코드 중에 ‘.mydiv’ 이부분은 상황에 맞게 수정해서 사용해야 한다.