interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>interact - 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">interact</h1> <section> <header> </header> <article> <div class="container-overview"> </div> <h3 class="subsection-title">Methods</h3> <div class="section-method"> <h4 class="name" id=".debug"><span class="type-signature">(static) </span>debug<span class="signature">()</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Returns an object which exposes internal data</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line168">line 168</a> </li></ul></dd> </dl> <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>An object with properties that outline the current state and expose internal functions and variables</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id=".dynamicDrop"><span class="type-signature">(static) </span>dynamicDrop<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean|<a href="global.html#interact">interact</a>}</span></h4> <div class="description"> <p>Returns or sets whether the dimensions of dropzone elements are calculated on every dragmove or only on dragstart for the default dropChecker</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_actions_drop.js.html">src/actions/drop.js</a>, <a href="src_actions_drop.js.html#line454">line 454</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>newValue</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>True to check on each move. False to check only before start</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>boolean</code></span> | <span class="param-type"><code><a href="global.html#interact">interact</a></code></span> </dd> </dl> <div class="param-desc"> <p>The current setting or interact</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id=".isSet"><span class="type-signature">(static) </span>isSet<span class="signature">(element)</span><span class="type-signature"> → {boolean}</span></h4> <div class="description"> <p>Check if an element or selector has been set with the <a href="global.html#interact"><code>interact</code></a> function</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line58">line 58</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>element</code></td> <td class="type"> <span class="param-type"><code>Element</code></span> </td> <td class="param-description last"> <p>The Element being searched for</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>boolean</code></span> </dd> </dl> <div class="param-desc"> <p>Indicates if the element or CSS selector was previously passed to interact</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id=".maxInteractions"><span class="type-signature">(static) </span>maxInteractions<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> <p>Returns or sets the maximum number of concurrent interactions allowed. By default only 1 interaction is allowed at a time (for backwards compatibility). To allow multiple interactions on the same Interactables and elements, you need to enable it in the draggable, resizable and gesturable <code>'max'</code> and <code>'maxPerElement'</code> options.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_autoStart_base.js.html">src/autoStart/base.js</a>, <a href="src_autoStart_base.js.html#line224">line 224</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>newValue</code></td> <td class="type"> <span class="param-type"><code>number</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>Any number. newValue <= 0 means no interactions.</p> </td> </tr> </tbody> </table> </div> <div class="section-method"> <h4 class="name" id=".off"><span class="type-signature">(static) </span>off<span class="signature">(type, listener, options)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Removes a global InteractEvent listener or DOM event from <code>document</code></p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line124">line 124</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>type</code></td> <td class="type"> <span class="param-type"><code>string</code></span> | <span class="param-type"><code>array</code></span> | <span class="param-type"><code>object</code></span> </td> <td class="param-description last"> <p>The types of events that were listened for</p> </td> </tr> <tr> <td class="name"><code>listener</code></td> <td class="type"> <span class="param-type"><code>function</code></span> </td> <td class="param-description last"> <p>The listener function to be removed</p> </td> </tr> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type"><code>object</code></span> | <span class="param-type"><code>boolean</code></span> </td> <td class="param-description last"> <p>[options] object or useCapture flag for removeEventListener</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=".on"><span class="type-signature">(static) </span>on<span class="signature">(type, listener, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Add a global listener for an InteractEvent or adds a DOM event to <code>document</code></p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line73">line 73</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>type</code></td> <td class="type"> <span class="param-type"><code>string</code></span> | <span class="param-type"><code>array</code></span> | <span class="param-type"><code>object</code></span> </td> <td class="attributes"> </td> <td class="param-description last"> <p>The types of events to listen for</p> </td> </tr> <tr> <td class="name"><code>listener</code></td> <td class="type"> <span class="param-type"><code>function</code></span> </td> <td class="attributes"> </td> <td class="param-description last"> <p>The function event (s)</p> </td> </tr> <tr> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type"><code>object</code></span> | <span class="param-type"><code>boolean</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>object or useCapture flag for addEventListener</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=".pointerMoveTolerance"><span class="type-signature">(static) </span>pointerMoveTolerance<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="global.html#interact">interact</a>|number}</span></h4> <div class="description"> <p>Returns or sets the distance the pointer must be moved before an action sequence occurs. This also affects tolerance for tap events.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line226">line 226</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>newValue</code></td> <td class="type"> <span class="param-type"><code>number</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>The movement from the start position must be greater than this value</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><a href="global.html#interact">interact</a></code></span> | <span class="param-type"><code>number</code></span> </dd> </dl> </div> </div> <div class="section-method"> <h4 class="name" id=".stop"><span class="type-signature">(static) </span>stop<span class="signature">(event)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Cancels all interactions (end events are not fired)</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line209">line 209</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>event</code></td> <td class="type"> <span class="param-type"><code>Event</code></span> </td> <td class="param-description last"> <p>An event on which to call preventDefault()</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=".supportsPointerEvent"><span class="type-signature">(static) </span>supportsPointerEvent<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line197">line 197</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>boolean</code></span> </dd> </dl> <div class="param-desc"> <p>Whether or not the browser supports PointerEvents</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id=".supportsTouch"><span class="type-signature">(static) </span>supportsTouch<span class="signature">()</span><span class="type-signature"> → {boolean}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interact.js.html">src/interact.js</a>, <a href="src_interact.js.html#line188">line 188</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>boolean</code></span> </dd> </dl> <div class="param-desc"> <p>Whether or not the browser supports touch input</p> </div> </div> </div> </article> </section> </div> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>