interactjs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>interact.js API Reference</title> <meta name="viewport" content="device-width"> <link rel="stylesheet" href="fonts/stylesheet.css"> <link rel="stylesheet" href="css/topcoat-desktop-light.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/dr.css"> <link rel="stylesheet" href="css/prism.css"> <link rel="icon" href="img/ijs-32.png"/>  </head> <body class="light"> <div id="wrapper"> <div class="max-width"> <div id="sideNav"> <div class="combo"> <input type="search" id="dr-filter" value="" placeholder="search" class="topcoat-search-input"> </div> <div id="pageNav"> <ol id="dr-toc"> <li class="dr-lvl0"> <a href="#Interactable" class="dr-property"><span>Interactable</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.actionChecker" class="dr-method"><span>Interactable.actionChecker()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.context" class="dr-method"><span>Interactable.context()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.deltaSource" class="dr-method"><span>Interactable.deltaSource()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.draggable" class="dr-method"><span>Interactable.draggable()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.dropzone" class="dr-method"><span>Interactable.dropzone()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.fire" class="dr-method"><span>Interactable.fire()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.gesturable" class="dr-method"><span>Interactable.gesturable()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.getRect" class="dr-method"><span>Interactable.getRect()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.off" class="dr-method"><span>Interactable.off()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.on" class="dr-method"><span>Interactable.on()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.origin" class="dr-method"><span>Interactable.origin()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.preventDefault" class="dr-method"><span>Interactable.preventDefault()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.rectChecker" class="dr-method"><span>Interactable.rectChecker()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.resizable" class="dr-method"><span>Interactable.resizable()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.set" class="dr-method"><span>Interactable.set()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.styleCursor" class="dr-method"><span>Interactable.styleCursor()</span></a> </li> <li class="dr-lvl1"> <a href="#Interactable.unset" class="dr-method"><span>Interactable.unset()</span></a> </li> <li class="dr-lvl0"> <a href="#Interaction" class="undefined"><span>Interaction</span></a> </li> <li class="dr-lvl1"> <a href="#Interaction.doMove" class="dr-method"><span>Interaction.doMove()</span></a> </li> <li class="dr-lvl1"> <a href="#Interaction.end" class="dr-method"><span>Interaction.end()</span></a> </li> <li class="dr-lvl1"> <a href="#Interaction.start" class="dr-method"><span>Interaction.start()</span></a> </li> <li class="dr-lvl0"> <a href="#interact" class="undefined"><span>interact</span></a> </li> <li class="dr-lvl1"> <a href="#interact.debug" class="dr-method"><span>interact.debug()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.dynamicDrop" class="dr-method"><span>interact.dynamicDrop()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.isSet" class="dr-method"><span>interact.isSet()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.maxInteractions" class="dr-method"><span>interact.maxInteractions()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.off" class="dr-method"><span>interact.off()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.on" class="dr-method"><span>interact.on()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.pointerMoveTolerance" class="dr-method"><span>interact.pointerMoveTolerance()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.stop" class="dr-method"><span>interact.stop()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.supportsPointerEvent" class="dr-method"><span>interact.supportsPointerEvent()</span></a> </li> <li class="dr-lvl1"> <a href="#interact.supportsTouch" class="dr-method"><span>interact.supportsTouch()</span></a> </li> </ol> </div> </div> </div> <div id="site"> <header id="main-header"> <div class="max-width"> <hgroup> <h1><a href="/"><img src="img/ijs-anim-short.svg" style="background-color:#dfe2e2;height:80px" alt="interact.js"></a></h1> <p>API Reference</p> </hgroup> </div> </header> <div id="content" class="max-width"> <article id="Interactable.draggable"> <header> <h3 class="dr-method">Interactable.draggable([options])<a href="#Interactable.draggable" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 117 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/actions/drag.js#L117">➭</a></h3> </header> <section> <div class="extra" id="Interactable.draggable-extra"></div> <div class="dr-method"> <p></p><p>Gets or sets whether drag actions can be performed on the Interactable </p><p></p> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">Indicates if this can be the target of drag events</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var isDraggable = interact('ul li').draggable();</code></pre></section> <p>or </p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">options</span> <span class="dr-type"><em class="dr-type-boolean">boolean</em> <em class="dr-type-object">object</em> </span> <span class="dr-description">true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)</span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">This Interactable</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">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 });</code></pre></section> </div> </section> </article> <article id="Interactable.dropzone"> <header> <h3 class="dr-method">Interactable.dropzone([options])<a href="#Interactable.dropzone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 319 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/actions/drop.js#L319">➭</a></h3> </header> <section> <div class="extra" id="Interactable.dropzone-extra"></div> <div class="dr-method"> <p></p><p>Returns or sets whether elements can be dropped onto this Interactable to trigger drop events </p><p>Dropzones can receive the following events: <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> </p><p>Use the <code>accept</code> option to allow only elements that match the given CSS selector or element. The value can be: </p><p><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> </p><p>Use the <code>overlap</code> option to set how drops are checked for. The allowed values are: </p><p><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>.</li> e.g. <code>0.5</code> for drop to happen when half of the area of the draggable is over the dropzone </p><p>Use the <code>checker</code> option to specify a function to check if a dragged element is over this Interactable. </p><p></p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">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></section> <p></p><p></p><p></p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">options</span> <span class="dr-type"><em class="dr-type-boolean">boolean</em> <em class="dr-type-object">object</em> <em class="dr-type-null">null</em> </span> <span class="dr-description">The new value to be set.</span></li> </ol> </div> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">interact('.drop').dropzone({ accept: '.can-drop' || document.getElementById('single-drop'), overlap: 'pointer' || 'center' || zeroToOne }</code></pre></section> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <em class="dr-type-object">object</em> <span class="dr-description">The current setting or this Interactable</span> </p> </div> </section> </article> <article id="interact.dynamicDrop"> <header> <h3 class="dr-method">interact.dynamicDrop([newValue])<a href="#interact.dynamicDrop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 449 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/actions/drop.js#L449">➭</a></h3> </header> <section> <div class="extra" id="interact.dynamicDrop-extra"></div> <div class="dr-method"> <p></p><p>Returns or sets whether the dimensions of dropzone elements are calculated on every dragmove or only on dragstart for the default dropChecker </p><p></p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">newValue</span> <span class="dr-type"><em class="dr-type-boolean">boolean</em> </span> <span class="dr-description">True to check on each move. False to check only before start</span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <em class="dr-type-interact">interact</em> <span class="dr-description">The current setting or interact</span> </p> </div> </section> </article> <article id="Interactable.resizable"> <header> <h3 class="dr-method">Interactable.resizable([options])<a href="#Interactable.resizable" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 315 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/actions/resize.js#L315">➭</a></h3> </header> <section> <div class="extra" id="Interactable.resizable-extra"></div> <div class="dr-method"> <p></p><p>Gets or sets whether resize actions can be performed on the Interactable </p><p></p> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">Indicates if this can be the target of resize elements</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var isResizeable = interact('input[type=text]').resizable();</code></pre></section> <p>or </p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">options</span> <span class="dr-type"><em class="dr-type-boolean">boolean</em> <em class="dr-type-object">object</em> </span> <span class="dr-description">true/false or An object with event listeners to be fired on resize events (object makes the Interactable resizable)</span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">This Interactable</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">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 @Interactable.draggable example max: Infinity, maxPerElement: 1, });</code></pre></section> </div> </section> </article> <article id="Interactable.gesturable"> <header> <h3 class="dr-method">Interactable.gesturable([options])<a href="#Interactable.gesturable" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 79 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/actions/gesture.js#L79">➭</a></h3> </header> <section> <div class="extra" id="Interactable.gesturable-extra"></div> <div class="dr-method"> <p></p><p>Gets or sets whether multitouch gestures can be performed on the Interactable's element </p><p></p> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">Indicates if this can be the target of gesture events</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var isGestureable = interact(element).gesturable();</code></pre></section> <p>or </p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">options</span> <span class="dr-type"><em class="dr-type-boolean">boolean</em> <em class="dr-type-object">object</em> </span> <span class="dr-description">true/false or An object with event listeners to be fired on gesture events (makes the Interactable gesturable)</span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">this Interactable</span> </p> <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">interact(element).gesturable({ onstart: function (event) {}, onmove : function (event) {}, onend : function (event) {}, // limit multiple gestures. // See the explanation in @Interactable.draggable example max: Infinity, maxPerElement: 1, });</code></pre></section> </div> </section> </article> <article id="Interactable"> <header> <h3 class="dr-property">Interactable<a href="#Interactable" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 28 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/Interactable.js#L28">➭</a></h3> </header> <section> <div class="extra" id="Interactable-extra"></div> <div class="dr-property"> <p>Object type returned by <a href="#interact" class="dr-link">interact</a> </p> </div> </section> </article> <article id="Interactable.getRect"> <header> <h3 class="dr-method">Interactable.getRect([element])<a href="#Interactable.getRect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 106 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/Interactable.js#L106">➭</a></h3> </header> <section> <div class="extra" id="Interactable.getRect-extra"></div> <div class="dr-method"> <p></p><p>The default function to get an Interactables bounding rect. Can be overridden using <a href="#Interactable.rectChecker" class="dr-link">Interactable.rectChecker</a>. </p><p></p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">element</span> <span class="dr-type"><em class="dr-type-Element">Element</em> </span> <span class="dr-description">The element to measure.</span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">The object's bounding rectangle.</span> </p> <ol class="dr-json"> <li>{<ol class="dr-json"> <li> top : 0,</li> <li> left : 0,</li> <li> bottom: 0,</li> <li> right : 0,</li> <li> width : 0,</li> <li> height: 0</li> </ol></li><li>}</li> </ol> </div> </section> </article> <article id="Interactable.rectChecker"> <header> <h3 class="dr-method">Interactable.rectChecker([checker])<a href="#Interactable.rectChecker" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 126 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/Interactable.js#L126">➭</a></h3> </header> <section> <div class="extra" id="Interactable.rectChecker-extra"></div> <div class="dr-method"> <p></p><p>Returns or sets the function used to calculate the interactable's element's rectangle </p><p></p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3> <ol class="topcoat-list"> <li class="topcoat-list__item"><span class="dr-param">checker</span> <span class="dr-type"><em class="dr-type-function">function</em> </span> <span class="dr-description">A function which returns this Interactable's bounding rectangle. See <a href="#Interactable.getRect" class="dr-link">Interactable.getRect</a></span></li> </ol> </div> <p class="dr-returns"> <strong class="dr-title">Returns:</strong> <em class="dr-type-function">function</em> <em class="dr-type-object">object</em> <span class="dr-description">The checker function or this Interactable</span> </p> </div> </section> </article> <article id="Interactable.origin"> <header> <h3 class="dr-method">Interactable.origin(…)<a href="#Interactable.origin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 169 in the source" href="https://github.com/taye/interact.js/blob/9595c40/src/Interactable.js#L169">➭</a></h3> </header> <section> <div class="extra" id="Interactable.origin-extra"></div> <div class="dr-method"> <p></p><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><p></p> <div class="topcoat-list__container"> <h3 class="topcoat-list__header">Parameters</h3>