[jQuery Mobile] swipe ( flicking) 구현방법정리

http://m.11st.co.kr 이나 다른 여러 사이트를 보면 손가락으로 상품을 이동시키는 기능을 제공한다.

이를 swipe 혹은 flicking이라고 한다.

이런 기능을 구현하기 위해 몇가지 방법을 정리한다.

1.jquery.touchSwipe.js 플러그인 사용하기
http://labs.skinkers.com/content/touchSwipe/

가장 많이 사용하는 방법임
아래 데모가 아주 잘 정리되어있음

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

Features

• Detects swipes in 4 directions, "up", "down", "left" and "right"
• Supports single finger or double finger touch events
• Supports click events both on the touchSwipe object and its child objects
• Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
• Events triggered for swipe "start","move","end" and "cancel"
• End event can be triggered either on touch release, or as soon as threshold is met
• Allows swiping and page scrolling

Demos

• Basic swipe
• Single swipe
• Any finger swipe
• 2 finger swipe
• Swipe status
• Trigger handlers
• Stop propegation
• Click vs swipe
• Thresholds
• Enable and destroy
• Page scrolling
• Image gallery example

Options

swipe

Funciton:null A catch all handler that is triggered for all swipe directions.

Handler is passed 3 arguments

event : the original event object
direction: the direction of the swipe : "left", "right", "up", "down".
distance: the distance of the swipe
duration: the duration of the swipe in ms

swipeLeft

Funciton:null A handler that is triggered for "left" swipes.

Handler is passed 3 arguments

event : the original event object
direction: the direction of the swipe : "left", "right", "up", "down".
distance: the distance of the swipe
duration: the duration of the swipe in ms

swipeRight

Funciton:null A handler that is triggered for "right" swipes.

Handler is passed 3 arguments

event : the original event object
direction: the direction of the swipe : "left", "right", "up", "down".
distance: the distance of the swipe
duration: the duration of the swipe in ms

swipeUp

Funciton:null A handler that is triggered for "up" swipes.

Handler is passed 3 arguments

event : the original event object
direction: the direction of the swipe : "left", "right", "up", "down".
distance: the distance of the swipe
duration: the duration of the swipe in ms

swipeDown

Funciton:null A handler that is triggered for "down" swipes.

Handler is passed 3 arguments

event : the original event object
direction: the direction of the swipe : "left", "right", "up", "down".
distance: the distance of the swipe
duration: the duration of the swipe in ms

swipeStatus

Function:null A handler triggered for every phase of the swipe.

Handler is passed 4 arguments

event : The original event object
phase:The current swipe face, either "start", "move", "end" or "cancel".
direction : The swipe direction, either "up", "down", "left " or "right".
distance : The distance of the swipe.
duration : The duration of the swipe.

click

Function:null A handler triggered when a user just clicks on the item, rather than swipes it. If they do not move, click is triggered, if they do move, it is not.

Handler is passed 2 arguments

event : The original event object
target : the HTML Dom object that was actually clicked on, this could be a child of the touchSwipe object.

fingers

int:1 The number of fingers to trigger the swipe, 1, 2 or 3. Or 'all' to trigger on any combination of fingers

 

threshold

int:75 The number of pixels that the user must move their finger before it is considered a swipe.

 

maxTimeThreshold

int:null The number of ms that the user must move their finger for it to be considered a swipe. Longer than this will not trigger a swipe

 

triggerOnTouchEnd

Boolean:true If true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold.

 

allowPageScroll

String:"auto". How the browser handles page scrolls when the user is swiping on a touchSwipe object.

Possible values are:

"auto" : all undfined swipes will cause the page to scroll in that direction.
"none" : the page will not scroll when user swipes.
"horizontal" : will force page to scroll on horizontal swipes.
"vertical" : will force page to scroll on vertical swipes.

 

2.jquery.event.drag 플러그인 사용하기

http://threedubmedia.com/code/event/drag

http://dohoons.com/test/flick/     실제구현페이지- 좋음

드레그에 특화된 플러그인이지만 swipe구현도 가능함

좋은 플러그인같음

jquery.event.drag

A jquery special event plugin that makes the task of adding complex drag interactions, to any element, simple and powerful.

Overview

The plugin works by using standard DOM events, and simulating custom events to create a drag interaction. It simplifies a recurring pattern of event interaction that can be fairly complex to design in a consistent, cross-browser manner. The drag interaction, while simple in most basic form, gets quite complex when introduced with issues of distance, handles, text selection, proxy elements, click suppression, and dropping.

This plugin is focused on correctly simulating the drag events in a very usable way. This plugin does not add classnames, does not alter the position or appearance of any elements, and does not alter the DOM. This plugin only provides the essential callbacks at the correct points in the interaction model to enable developers to have complete control over the interactions that they create. This reduces the file size, eliminates dependencies, and increases performance.

Events

A basic drag interaction starts when a user presses down a mouse button with the cursor inside an element (mousedown), continues while the user moves the mouse (mousemove), and ends when the user releases the mouse button (mouseup). The standard DOM events (mousedown, mousemove, mouseup) loosely translate into the special drag events. This plugin takes these DOM events and triggers the following events at key points in the interaction. None of these drag events bubble.

• draginit
  This event is fired when a mouse button is pressed (mousedown) within the bound element. The handler can return false to cancel the rest of the drag interaction events, or can return elements to use as the drag targets for the rest of the drag interaction. This event will not fire unless the options "not", "handle", and "which" are all satisfied.
• dragstart
  This event fires after "draginit", once the mouse has moved a minimum "distance", which may be specificed in the options. The handler can return false to cancel the rest of the drag interaction events, or can return an element to set as the drag proxy for the rest of the drag interaction. If dragging multiple elements (from "draginit"), this event will fire uniquely on each element.
• drag
  This event fires after "draginit" and "dragstart" every time the mouse moves. The handler can return false to stop the drag interaction and go straight to "dragend" and also prevent any "drop" events. If dragging multiple elements (from "draginit"), this event will fire uniquely on each element.
• dragend
  This event fires after "draginit" and "dragstart" and "drag" when the mouse button is released, or when a "drag" event is canceled. This event will always fire after any "drop" events. If dragging multiple elements (from "draginit"), this event will fire uniquely on each element.

This plugin also supports "live" event delegation... sort of. When a live event gets bound, the plugin automatically adds a "draginit" event which makes the interaction work correctly. It checks the event target element against any live handlers, any matching ones get attached to the target element. After the interaction is complete, the handlers get cleaned up. The most important point to take from this is that live "draginit" events will not work correctly.

Methods

In the interest of maintaining consistency with the jQuery API, a helper method has been added as shorthand for binding and triggering "drag" event handlers. The previous version of this plugin allowed this method to be overloaded with arguments to additionally bind handlers for "dragstart" and "dragend" in a single call, but this is no longer supported. Instead, an optional type argument may be included to bind or trigger the related events (the "drag" prefix is optional). Options may also be included as the final argument and are optional.

• .drag()
  Triggers any bound "drag" event handlers for each element in the jQuery collection.
  Equivilent to: .trigger("drag").
• .drag( type )
  Triggers any bound "dragtype" event handlers for each element in the jQuery collection. (Types are: init, start, end)
  Equivilent to: .trigger("dragtype").
• .drag( handler, options )
  Binds a "drag" event handler to each element in the jQuery collection.
  Equivilent to: .bind("drag", options, handler )
• .drag( type, handler, options )
  Binds a "dragtype" event handler to each element in the jQuery collection. (Types are: init, start, end)
  Equivilent to: .bind("dragtype", options, handler )

Options

All of these settings are optional, and may be passed in through the "data" argument in the jQuery "bind" method, or the "options" argument in the jQuery "drag" method.

• which (Number) Default: 1
  A number that matches the "which" event property to indicate the mousebutton that is pressed. (0 = Any Button, 1 = Left Button, 2 = Middle Button, 3 = Right Button)
• distance (Number) Default: 0
  A number representing the length of pixels that the mouse must move before the "dragstart" event may fire.
• not (String) Default: ":input"
  A jquery selector expression that matches elements where dragging is not allowed to begin.
• handle (String) Default: NULL
  A jquery selector expression that matches elements where dragging is allowed to begin.
• relative (Boolean) Default: FALSE
  A boolean to indicate whether to use element position relative to the document or the offset parent. This setting affects the values offsetX, offsetY, originalX, and originalY. (FALSE = Position Relative to the Document)
• click (Boolean) Default: FALSE
  A boolean to indicate whether or not "click" events are allowed to fire after the "dragend" event. (FALSE = No Click)
• drop (Boolean|String) Default: TRUE
  A boolean to indicate whether or not "drag" events are considered in the drag interaction, or a jquery selector expression that should filter and match a subset of the registered drop targets. (FALSE = No Dropping, TRUE = Drop Anywhere, ":expr" = Drop in targets that match this expression)

The default values are stored in the jQuery.event.special.drag.defaults object.

Properties

The following properties belong to a dragdrop callback object which is passed as the second argument to each event handler, unique to each dragged element, and shared throughout the drag interaction.

• target (Element)
  The drag element, or the drop element, to which the event handler has been bound. (Always the same as "this" within an event handler)
• drag (Element)
  The dragged element for the given interaction to which the drag event has been bound.
• proxy (Element)
  The dragged element, or any element returned by the "dragstart" handler. The proxy element is used to determine the drop target tolerance.
• drop (Array)
  Contains all of the active drop targets for the current interaction.
• available (Array)
  Contains all of the available drop targets for the current interaction.
• update (Function)
  A helper function which updates the locations of all of the available drop targets for the current interaction.
• startX (Number)
  The horizontal location of the "mousedown" event.
• startY (Number)
  The vertical location of the "mousedown" event.
• deltaX (Number)
  The horizontal distance moved from "startX".
• deltaY (Number)
  The vertical distance moved from "startX".
• originalX (Number)
  The starting horizontal position of the drag "target" element.
• originalY (Number)
  The starting vertical position of the drag "target" element.
• offsetX (Number)
  The the moved horizontal position of the drag "target" element.
• offsetY (Number)
  The the moved vertical position of the drag "target" element.

The callback object is extensible. You can add any property within one event handler and it will be available in any other event handlers that follow (per dragged element). Additional properties or methods can be added to jQuery.event.special.drag.callback.prototype and will be available in all event handlers for all elements.

Demos

The following examples are intended to show how the drag special events can be configured to acheive a wide range of features for any drag interaction. I have simplified each demo as much as possible, to really highlight the core of each feature. If you have any problems, or want to suggest a new feature, or a new demo, please contact me via the ThreeDubMedia Google Group.

• Basic
  One of the simplest ways to create a drag interaction, with the "drag" method.
• Relative
  A simple drag operation using the relative option.
• Axis
  A way to restrict movement in one dimension.
• Grid
  A technique for restricting movement to a grid.
• Contain
  A technique for restricting movement to a container.
• Circular
  Using trigonometry to restrict movement to a circular path.
• Handle
  Using the "bind" data parameter and the "handle" option.
• Active
  Using the "dragstart" and "dragend" events to toggle an "active" drag state.
• Proxy
  Using the "dragstart" handler to return a proxy element.
• Z-index
  Using the "dragstart" handler to ensure the dragged element is on top.
• Revert
  Using the "startX" and "startY" properties to restore starting position.
• Multi
  Using the "draginit" handler to return multiple elements.
• Offset
  Setting a fixed element offset for dragged elements.
• Live
  Using "live" event delegation with "drag" events.
• Which
  Using the "which" option to target a specific mouse button.
• Click
  Using the "click" option to allow a click to propagate after dragging.
• Not
  Using the "not" option to prevent dragging by selector expression.
• Distance
  Using the "distance" option to prevent dragging until a pixel threshold has been crossed.
• Resize
  Using the "deltaX" and "deltaY" properties to resize an element.
• Resize2
  A complex example showing resize in 8 directions with multiple elements.
• Draw
  Using the drag events to manipulate a canvas element.

3. jquery mobile 을 사용

http://developingwithstyle.blogspot.kr/2010/11/jquery-mobile-swipe-up-down-left-right.html  --구현예제사이트

 

http://blog.naver.com/PostView.nhn?blogId=wonpaper&logNo=130132674831 --참고블로그

http://coronasdk.tistory.com/226 -- JQuery Mobile 훑어 보기

http://coronasdk.tistory.com/264

http://coronasdk.tistory.com/321

http://www.ibm.com/developerworks/kr/xml/tutorials/x-jquerymobilejsontut/section2.html

http://ygang.tistory.com/106  터치이벤트 정리글

4.iScroll 라이브러리사용

http://iolothebard.tistory.com/491

출처 : http://pcycom.tistory.com/554