Jquery 스와이프 이벤트 - jquery seuwaipeu ibenteu

목차 Show

Description
[jQuery] jQuery swipe event

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

http://github.com/stephband/jquery.event.swipe

Tags: touch, special, event, swipe

Version

0.5.4

Asset Type

All

https://cdnjs.cloudflare.com/ajax/libs/jquery.event.swipe/0.5.4/jquery.event.swipe.js
https://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
    });

Name	Type	Default	Description
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.

<!DOCTYPE html>
   <head>
      <title>Swipe Event</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecreate","#page1",function() {
            $("p").on("swipe",function() {
               $("span").text("swipe event occurred!!!");
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>It will display the text when you swipe here.</p>
            <span style = "color:orange"></span>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

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 http://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’ 이부분은 상황에 맞게 수정해서 사용해야 한다.