hammerjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drag - Hammer.JS</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0pr2/build/cssgrids/cssgrids-min.css"> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <script src="http://yui.yahooapis.com/combo?3.8.0pr2/build/yui/yui-min.js"></script> </head> <body class="yui3-skin-sam"> <div id="doc"> <div id="hd" class="yui3-g header"> <div class="yui3-u-3-4"> <h1><a href="../index.html">Hammer.JS: Drag</a></h1> </div> <div class="yui3-u-1-4 version"> <em>API Docs for: 1.1.0</em> </div> </div> <div class="yui3-g"> <div id="sidebar" class="yui3-u"> <div id="modules" class="sidebox"> <div class="hd"> <h2 class="no-toc">Modules</h2> </div> <div class="bd"> <ul> <li><a href="../modules/gestures.html">gestures</a> </li> <li><a href="../modules/hammer.html">hammer</a> </li> </ul> </div> </div> <div id="classes" class="sidebox"> <div class="hd"> <h2 class="no-toc">Classes</h2> </div> <div class="bd"> <ul> <li><a href="../classes/Detection.html">Detection</a></li> <li><a href="../classes/Drag.html">Drag</a></li> <li><a href="../classes/Event.html">Event</a></li> <li><a href="../classes/Gesture.html">Gesture</a></li> <li><a href="../classes/Hammer.html">Hammer</a></li> <li><a href="../classes/Hold.html">Hold</a></li> <li><a href="../classes/Instance.html">Instance</a></li> <li><a href="../classes/PointerEvent.html">PointerEvent</a></li> <li><a href="../classes/Release.html">Release</a></li> <li><a href="../classes/Swipe.html">Swipe</a></li> <li><a href="../classes/Tap.html">Tap</a></li> <li><a href="../classes/Touch.html">Touch</a></li> <li><a href="../classes/Transform.html">Transform</a></li> <li><a href="../classes/Utils.html">Utils</a></li> </ul> </div> </div> <div id="events-on-page" class="sidebox on-page"> <div class="hd"> <h2 class="no-toc">Events On Page</h2> </div> <div class="bd"> <ul> <li><a href="#events_drag">drag</a></li> <li><a href="#events_dragdown">dragdown</a></li> <li><a href="#events_dragend">dragend</a></li> <li><a href="#events_dragright">dragright</a></li> <li><a href="#events_dragstart">dragstart</a></li> <li><a href="#events_dragup">dragup</a></li> <li><a href="#events_drapleft">drapleft</a></li> </ul> </div> </div> <div id="fileTree" class="sidebox"> <div class="hd"> <h2 class="no-toc">Files</h2> </div> <div class="bd"> <ul><li>src/<ul><li><a href="../files/src_detection.js.html">detection.js</a></li><li><a href="../files/src_event.js.html">event.js</a></li><li><a href="../files/src_export.js.html">export.js</a></li><li>gestures/<ul><li><a href="../files/src_gestures_drag.js.html">drag.js</a></li><li><a href="../files/src_gestures_gesture.js.html">gesture.js</a></li><li><a href="../files/src_gestures_hold.js.html">hold.js</a></li><li><a href="../files/src_gestures_release.js.html">release.js</a></li><li><a href="../files/src_gestures_swipe.js.html">swipe.js</a></li><li><a href="../files/src_gestures_tap.js.html">tap.js</a></li><li><a href="../files/src_gestures_touch.js.html">touch.js</a></li><li><a href="../files/src_gestures_transform.js.html">transform.js</a></li></ul></li><li><a href="../files/src_instance.js.html">instance.js</a></li><li><a href="../files/src_pointerevent.js.html">pointerevent.js</a></li><li><a href="../files/src_setup.js.html">setup.js</a></li><li><a href="../files/src_utils.js.html">utils.js</a></li></ul></li></ul> </div> </div> </div> <div id="main" class="yui3-u"> <div class="content"><h4>Class Drag</h4> <span class="foundat">Class defined in: <a href="../files/src_gestures_drag.js.html#l4"><code>src/gestures/drag.js:4</code></a></span> <div class="intro"><p>Move with x fingers (default 1) around on the page. Preventing the default browser behavior is a good way to improve feel and working.</p> <pre class="code prettyprint"><code> hammertime.on("drag", function(ev) { console.log(ev); ev.gesture.preventDefault(); });</code></pre> </div> <div id="classdocs"> <ul> <li><a href="#props">Properties</a></li> <li><a href="#events">Events</a></li> </ul> <div> <div id="props"> <a name="props_correct_for_drag_min_distance"></a> <div class="props item"> <code>correct_for_drag_min_distance</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l154"><code>src/gestures/drag.js:154</code></a></span> <p>Set correct_for_drag_min_distance to true to make the starting point of the drag be calculated from where the drag was triggered, not from where the touch started. Useful to avoid a jerk-starting drag, which can make fine-adjustments through dragging difficult, and be visually unappealing.</p> <strong>Default:</strong> true </div> <a name="props_drag_block_horizontal"></a> <div class="props item"> <code>drag_block_horizontal</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l173"><code>src/gestures/drag.js:173</code></a></span> <p>prevent default browser behavior when dragging occurs be careful with it, it makes the element a blocking element when you are using the drag gesture, it is a good practice to set this true</p> <strong>Default:</strong> false </div> <a name="props_drag_block_vertical"></a> <div class="props item"> <code>drag_block_vertical</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l183"><code>src/gestures/drag.js:183</code></a></span> <p>same as <code>drag_block_horizontal</code>, but for vertical movement</p> <strong>Default:</strong> false </div> <a name="props_drag_lock_min_distance"></a> <div class="props item"> <code>drag_lock_min_distance</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l200"><code>src/gestures/drag.js:200</code></a></span> <p>drag lock only kicks in when distance > drag_lock_min_distance This way, locking occurs only when the distance has become large enough to reliably determine the direction</p> <strong>Default:</strong> 25 </div> <a name="props_drag_lock_to_axis"></a> <div class="props item"> <code>drag_lock_to_axis</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l191"><code>src/gestures/drag.js:191</code></a></span> <p>drag_lock_to_axis keeps the drag gesture on the axis that it started on, It disallows vertical directions if the initial direction was horizontal, and vice versa.</p> <strong>Default:</strong> false </div> <a name="props_drag_max_touches"></a> <div class="props item"> <code>drag_max_touches</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l165"><code>src/gestures/drag.js:165</code></a></span> <p>set 0 for unlimited, but this can conflict with transform</p> <strong>Default:</strong> 1 </div> <a name="props_drag_min_distance"></a> <div class="props item"> <code>drag_min_distance</code> <<strong><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></strong>> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l146"><code>src/gestures/drag.js:146</code></a></span> <p>minimal movement that have to be made before the drag event gets triggered</p> <strong>Default:</strong> 10 </div> </div> <div id="events"> <a name="events_drag"></a> <div class="events item"> <code>drag</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l17"><code>src/gestures/drag.js:17</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_dragdown"></a> <div class="events item"> <code>dragdown</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l41"><code>src/gestures/drag.js:41</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_dragend"></a> <div class="events item"> <code>dragend</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l25"><code>src/gestures/drag.js:25</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_dragright"></a> <div class="events item"> <code>dragright</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l33"><code>src/gestures/drag.js:33</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_dragstart"></a> <div class="events item"> <code>dragstart</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l21"><code>src/gestures/drag.js:21</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_dragup"></a> <div class="events item"> <code>dragup</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l37"><code>src/gestures/drag.js:37</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> <a name="events_drapleft"></a> <div class="events item"> <code>drapleft</code> <br> <span class="foundat"><a href="../files/src_gestures_drag.js.html#l29"><code>src/gestures/drag.js:29</code></a></span> <strong>Extra event object properties:</strong> <ul> <li> <code>ev</code> <strong><<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a>></strong> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script>prettyPrint();</script> <script src="../assets/js/yui-prettify.js"></script> <script src="../assets/js/tabs.js"></script> </body> </html>