interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interaction - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interactable.html">Interactable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#actionChecker">actionChecker</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#context">context</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#deltaSource">deltaSource</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#draggable">draggable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropzone">dropzone</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#fire">fire</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#gesturable">gesturable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#getRect">getRect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#origin">origin</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#preventDefault">preventDefault</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#rectChecker">rectChecker</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#resizable">resizable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#set">set</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#styleCursor">styleCursor</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#unset">unset</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="InteractEvent.html">InteractEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="InteractEvent.html#stopImmediatePropagation">stopImmediatePropagation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="InteractEvent.html#stopPropagation">stopPropagation</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interaction.html">Interaction</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interaction.html#doMove">doMove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interaction.html#end">end</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interaction.html#start">start</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interaction.html#stop">stop</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="module.exports_module.exports.html">exports</a></span></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-interact.html">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.debug">debug</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.dynamicDrop">dynamicDrop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.isSet">isSet</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.maxInteractions">maxInteractions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.stop">stop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsTouch">supportsTouch</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#interact">interact</a></span></li> </nav> <div class="code-col-bg"></div> <div id="main"> <h1 class="page-title">Interaction</h1> <section> <header> <h2> Interaction </h2> </header> <article> <div class="container-overview"> <div class="section-method"> <h4 class="name" id="Interaction"><span class="type-signature"></span>new Interaction<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interaction.js.html">src/Interaction.js</a>, <a href="src_Interaction.js.html#line23">line 23</a> </li></ul></dd> </dl> </div> </div> <h3 class="subsection-title">Methods</h3> <div class="section-method"> <h4 class="name" id="doMove"><span class="type-signature"></span>doMove<span class="signature">()</span><span class="type-signature"></span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(target) .draggable(true) .on('dragmove', function (event) { if (someCondition) { // change the snap settings event.interactable.draggable({ snap: { targets: [] }}); // fire another move event with re-calculated snap event.interaction.doMove(); } }); </code></pre> <p>Force a move of the current action at the same coordinates. Useful if snap/restrict has been changed and you want a movement with the new settings.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interaction.js.html">src/Interaction.js</a>, <a href="src_Interaction.js.html#line223">line 223</a> </li></ul></dd> </dl> </div> <div class="section-method"> <h4 class="name" id="end"><span class="type-signature"></span>end<span class="signature">(event<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(target) .draggable(true) .on('move', function (event) { if (event.pageX > 1000) { // end the current action event.interaction.end(); // stop all further listeners from being called event.stopImmediatePropagation(); } }); </code></pre> <p>Stop the current action and fire an end event. Inertial movement does not happen.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interaction.js.html">src/Interaction.js</a>, <a href="src_Interaction.js.html#line280">line 280</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>event</code></td> <td class="type"> <span class="param-type"><code>PointerEvent</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> </td> </tr> </tbody> </table> </div> <div class="section-method"> <h4 class="name" id="start"><span class="type-signature"></span>start<span class="signature">(action, target, element)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(target) .draggable({ // disable the default drag start by down->move manualStart: true }) // start dragging after the user holds the pointer down .on('hold', function (event) { var interaction = event.interaction; if (!interaction.interacting()) { interaction.start({ name: 'drag' }, event.interactable, event.currentTarget); } }); </code></pre> <p>Start an action with the given Interactable and Element as tartgets. The action must be enabled for the target Interactable and an appropriate number of pointers must be held down - 1 for drag/resize, 2 for gesture.</p> <p>Use it with <code>interactable.<action>able({ manualStart: false })</code> to always <a href="https://github.com/taye/interact.js/issues/114">start actions manually</a></p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interaction.js.html">src/Interaction.js</a>, <a href="src_Interaction.js.html#line129">line 129</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>action</code></td> <td class="type"> <span class="param-type"><code>object</code></span> </td> <td class="param-description last"> <p>The action to be performed - drag, resize, etc.</p> </td> </tr> <tr> <td class="name"><code>target</code></td> <td class="type"> <span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span> </td> <td class="param-description last"> <p>The Interactable to target</p> </td> </tr> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type"><code>Element</code></span> </td> <td class="param-description last"> <p>The DOM Element to target</p> </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>object</code></span> </dd> </dl> <div class="param-desc"> <p>interact</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"></span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interaction.js.html">src/Interaction.js</a>, <a href="src_Interaction.js.html#line305">line 305</a> </li></ul></dd> </dl> </div> </article> </section> </div> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>