interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interactable - 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">Interactable</h1> <section> <header> <h2> Interactable </h2> </header> <article> <div class="container-overview"> <div class="section-method"> <h4 class="name" id="Interactable"><span class="type-signature"></span>new Interactable<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_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line26">line 26</a> </li></ul></dd> </dl> </div> </div> <h3 class="subsection-title">Members</h3> <div class="section-members"> <h4 class="name" id="allowFrom"><span class="type-signature"></span>allowFrom<span class="type-signature"></span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code></code></pre> </div> <dl class="details"> <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>A drag/resize/gesture is started only If the target of the `mousedown`, `pointerdown` or `touchstart` event or any of it's parents match the given CSS selector or Element. Don't use this method. Instead set the `allowFrom` option for each action or for `pointerEvents`</li></ul></dd> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_autoStart_InteractableMethods.js.html">src/autoStart/InteractableMethods.js</a>, <a href="src_autoStart_InteractableMethods.js.html#line75">line 75</a> </li></ul></dd> </dl> <pre class="prettyprint"><code>interact(targett) .resizable({ allowFrom: '.resize-handle', .pointerEvents({ allowFrom: '.handle',, });</code></pre> </div> <div class="section-members"> <h4 class="name" id="ignoreFrom"><span class="type-signature"></span>ignoreFrom<span class="type-signature"></span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(element, { ignoreFrom: document.getElementById('no-action') }); // or interact(element).ignoreFrom('input, textarea, a'); </code></pre> </div> <dl class="details"> <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>If the target of the `mousedown`, `pointerdown` or `touchstart` event or any of it's parents match the given CSS selector or Element, no drag/resize/gesture is started. Don't use this method. Instead set the `ignoreFrom` option for each action or for `pointerEvents`</li></ul></dd> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_autoStart_InteractableMethods.js.html">src/autoStart/InteractableMethods.js</a>, <a href="src_autoStart_InteractableMethods.js.html#line47">line 47</a> </li></ul></dd> </dl> <pre class="prettyprint"><code>interact(targett) .draggable({ ignoreFrom: 'input, textarea, a[href]'', }) .pointerEvents({ ignoreFrom: '[no-pointer]', });</code></pre> </div> <h3 class="subsection-title">Methods</h3> <div class="section-method"> <h4 class="name" id="actionChecker"><span class="type-signature"></span>actionChecker<span class="signature">(checker<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {function|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact('.resize-drag') .resizable(true) .draggable(true) .actionChecker(function (pointer, event, action, interactable, element, interaction) { if (interact.matchesSelector(event.target, '.drag-handle') { // force drag with handle target action.name = drag; } else { // resize from the top and right edges action.name = 'resize'; action.edges = { top: true, right: true }; } return action; }); </code></pre> <p>Gets or sets the function used to check action to be performed on pointerDown</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_autoStart_InteractableMethods.js.html">src/autoStart/InteractableMethods.js</a>, <a href="src_autoStart_InteractableMethods.js.html#line143">line 143</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>checker</code></td> <td class="type"> <span class="param-type"><code>function</code></span> | <span class="param-type"><code>null</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>A function which takes a pointer event, defaultAction string, interactable, element and interaction as parameters and returns an object with name property 'drag' 'resize' or 'gesture' and optionally an <code>edges</code> object with boolean 'top', 'left', 'bottom' and right props.</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>function</code></span> | <span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>The checker function or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="context"><span class="type-signature"></span>context<span class="signature">()</span><span class="type-signature"> → {Node}</span></h4> <div class="description"> <p>Gets the selector context Node of the Interactable. The default is <code>window.document</code>.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line179">line 179</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>Node</code></span> </dd> </dl> <div class="param-desc"> <p>The context Node of this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="deltaSource"><span class="type-signature"></span>deltaSource<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {string|object}</span></h4> <div class="description"> <p>Returns or sets the mouse coordinate types used to calculate the movement of the pointer.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line163">line 163</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>string</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>Use 'client' if you will be scrolling while interacting; Use 'page' if you want autoScroll to work</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>string</code></span> | <span class="param-type"><code>object</code></span> </dd> </dl> <div class="param-desc"> <p>The current deltaSource or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="draggable"><span class="type-signature"></span>draggable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(element).draggable({ onstart: function (event) {}, onmove : function (event) {}, onend : function (event) {}, // the axis in which the first movement must be // for the drag sequence to start // 'xy' by default - any direction startAxis: 'x' || 'y' || 'xy', // 'xy' by default - don't restrict to one axis (move in any direction) // 'x' or 'y' to restrict movement to either axis // 'start' to restrict movement to the axis the drag started in lockAxis: 'x' || 'y' || 'xy' || 'start', // max number of drags that can happen concurrently // with elements of this Interactable. Infinity by default max: Infinity, // max number of drags that can target the same element+Interactable // 1 by default maxPerElement: 2 }); var isDraggable = interact('element').draggable(); // true </code></pre> <p>Get or set whether drag actions can be performed on the target</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_actions_drag.js.html">src/actions/drag.js</a>, <a href="src_actions_drag.js.html#line119">line 119</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>options</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> | <span class="param-type"><code>object</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)</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="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>boolean indicating if this can be the target of drag events, or this Interctable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="dropzone"><span class="type-signature"></span>dropzone<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(target) .dropChecker(function(dragEvent, // related dragmove or dragend event event, // TouchEvent/PointerEvent/MouseEvent dropped, // bool result of the default checker dropzone, // dropzone Interactable dropElement, // dropzone elemnt draggable, // draggable Interactable draggableElement) {// draggable element return dropped && event.target.hasAttribute('allow-drop'); } </code></pre> <pre class="prettyprint source lang-js"><code>interact('.drop').dropzone({ accept: '.can-drop' || document.getElementById('single-drop'), overlap: 'pointer' || 'center' || zeroToOne } </code></pre> <p>Returns or sets whether draggables can be dropped onto this target to trigger drop events</p> <p>Dropzones can receive the following events:</p> <ul> <li><code>dropactivate</code> and <code>dropdeactivate</code> when an acceptable drag starts and ends</li> <li><code>dragenter</code> and <code>dragleave</code> when a draggable enters and leaves the dropzone</li> <li><code>dragmove</code> when a draggable that has entered the dropzone is moved</li> <li><code>drop</code> when a draggable is dropped into this dropzone</li> </ul> <p>Use the <code>accept</code> option to allow only elements that match the given CSS selector or element. The value can be:</p> <ul> <li><strong>an Element</strong> - only that element can be dropped into this dropzone.</li> <li><strong>a string</strong>, - the element being dragged must match it as a CSS selector.</li> <li><strong><code>null</code></strong> - accept options is cleared - it accepts any element.</li> </ul> <p>Use the <code>overlap</code> option to set how drops are checked for. The allowed values are:</p> <ul> <li><code>'pointer'</code>, the pointer must be over the dropzone (default)</li> <li><code>'center'</code>, the draggable element's center must be over the dropzone</li> <li>a number from 0-1 which is the <code>(intersection area) / (draggable area)</code>. e.g. <code>0.5</code> for drop to happen when half of the area of the draggable is over the dropzone</li> </ul> <p>Use the <code>checker</code> option to specify a function to check if a dragged element is over this Interactable.</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#line327">line 327</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>options</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> | <span class="param-type"><code>object</code></span> | <span class="param-type"><code>null</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>The new options to be set.</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="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>The current setting or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="fire"><span class="type-signature"></span>fire<span class="signature">(iEvent)</span><span class="type-signature"> → {<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <p>Calls listeners for the given InteractEvent type bound globally and directly to this Interactable</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line196">line 196</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>iEvent</code></td> <td class="type"> <span class="param-type"><code><a href="InteractEvent.html">InteractEvent</a></code></span> </td> <td class="param-description last"> <p>The InteractEvent object to be fired on this Interactable</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="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="gesturable"><span class="type-signature"></span>gesturable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(element).gesturable({ onstart: function (event) {}, onmove : function (event) {}, onend : function (event) {}, // limit multiple gestures. // See the explanation in <code>Interactable.draggable</code> example max: Infinity, maxPerElement: 1, }); var isGestureable = interact(element).gesturable(); </code></pre> <p>Gets or sets whether multitouch gestures can be performed on the target</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_actions_gesture.js.html">src/actions/gesture.js</a>, <a href="src_actions_gesture.js.html#line79">line 79</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>options</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> | <span class="param-type"><code>object</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>true/false or An object with event listeners to be fired on gesture events (makes the Interactable gesturable)</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="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>A boolean indicating if this can be the target of gesture events, or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="getRect"><span class="type-signature"></span>getRect<span class="signature">(element<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>The default function to get an Interactables bounding rect. Can be overridden using <code>Interactable.rectChecker</code>.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line93">line 93</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>element</code></td> <td class="type"> <span class="param-type"><code>Element</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>The element to measure.</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>The object's bounding rectangle.</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="off"><span class="type-signature"></span>off<span class="signature">(eventType, listener, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Removes an InteractEvent, pointerEvent or DOM event listener</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line265">line 265</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>eventType</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 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="attributes"> </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="attributes"> <optional><br> </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>This Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="on"><span class="type-signature"></span>on<span class="signature">(eventType, listener, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Binds a listener for an InteractEvent, pointerEvent or DOM event.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line234">line 234</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>eventType</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>options 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>This Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="origin"><span class="type-signature"></span>origin<span class="signature">(origin<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Gets or sets the origin of the Interactable's element. The x and y of the origin will be subtracted from action event coordinates.</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line151">line 151</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>origin</code></td> <td class="type"> <span class="param-type"><code>Element</code></span> | <span class="param-type"><code>object</code></span> | <span class="param-type"><code>string</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>An HTML or SVG Element whose rect will be used, an object eg. { x: 0, y: 0 } or string 'parent', 'self' or any CSS selector</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>The current origin or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="preventDefault"><span class="type-signature"></span>preventDefault<span class="signature">(newValue<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {string|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <p>Returns or sets whether to prevent the browser's default behaviour in response to pointer events. Can be set to:</p> <ul> <li><code>'always'</code> to always prevent</li> <li><code>'never'</code> to never prevent</li> <li><code>'auto'</code> to let interact.js try to determine what would be best</li> </ul> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_interactablePreventDefault.js.html">src/interactablePreventDefault.js</a>, <a href="src_interactablePreventDefault.js.html#line20">line 20</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>string</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p><code>true</code>, <code>false</code> or <code>'auto'</code></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>string</code></span> | <span class="param-type"><code><a href="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>The current setting or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="rectChecker"><span class="type-signature"></span>rectChecker<span class="signature">(checker<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {function|object}</span></h4> <div class="description"> <p>Returns or sets the function used to calculate the interactable's element's rectangle</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line111">line 111</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>checker</code></td> <td class="type"> <span class="param-type"><code>function</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>A function which returns this Interactable's bounding rectangle. See <code>Interactable.getRect</code></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>function</code></span> | <span class="param-type"><code>object</code></span> </dd> </dl> <div class="param-desc"> <p>The checker function or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="resizable"><span class="type-signature"></span>resizable<span class="signature">(options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean|<a href="Interactable.html">Interactable</a>}</span></h4> <div class="description"> <pre class="prettyprint source lang-js"><code>interact(element).resizable({ onstart: function (event) {}, onmove : function (event) {}, onend : function (event) {}, edges: { top : true, // Use pointer coords to check for resize. left : false, // Disable resizing from left edge. bottom: '.resize-s',// Resize if pointer target matches selector right : handleEl // Resize if pointer target is the given Element }, // Width and height can be adjusted independently. When `true`, width and // height are adjusted at a 1:1 ratio. square: false, // Width and height can be adjusted independently. When `true`, width and // height maintain the aspect ratio they had when resizing started. preserveAspectRatio: false, // a value of 'none' will limit the resize rect to a minimum of 0x0 // 'negate' will allow the rect to have negative width/height // 'reposition' will keep the width/height positive by swapping // the top and bottom edges and/or swapping the left and right edges invert: 'none' || 'negate' || 'reposition' // limit multiple resizes. // See the explanation in the <code>Interactable.draggable</code> example max: Infinity, maxPerElement: 1, }); var isResizeable = interact(element).resizable(); </code></pre> <p>Gets or sets whether resize actions can be performed on the target</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_actions_resize.js.html">src/actions/resize.js</a>, <a href="src_actions_resize.js.html#line317">line 317</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>options</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> | <span class="param-type"><code>object</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="param-description last"> <p>true/false or An object with event listeners to be fired on resize events (object makes the Interactable resizable)</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="Interactable.html">Interactable</a></code></span> </dd> </dl> <div class="param-desc"> <p>A boolean indicating if this can be the target of resize elements, or this Interactable</p> </div> </div> </div> <div class="section-method"> <h4 class="name" id="set"><span class="type-signature"></span>set<span class="signature">(options)</span><span class="type-signature"> → {object}</span></h4> <div class="description"> <p>Reset the options of this Interactable</p> </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="src_Interactable.js.html">src/Interactable.js</a>, <a href="src_Interactable.js.html#line294">line 294</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <t