interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>src/actions/drag.js - 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">C<a href="Interactable.html">Interactable</a></li><li class="nav-item">F<a href="Interactable.html#actionChecker">actionChecker</a></li><li class="nav-item">F<a href="Interactable.html#context">context</a></li><li class="nav-item">F<a href="Interactable.html#deltaSource">deltaSource</a></li><li class="nav-item">F<a href="Interactable.html#draggable">draggable</a></li><li class="nav-item">F<a href="Interactable.html#dropzone">dropzone</a></li><li class="nav-item">F<a href="Interactable.html#fire">fire</a></li><li class="nav-item">F<a href="Interactable.html#gesturable">gesturable</a></li><li class="nav-item">F<a href="Interactable.html#getRect">getRect</a></li><li class="nav-item">F<a href="Interactable.html#off">off</a></li><li class="nav-item">F<a href="Interactable.html#on">on</a></li><li class="nav-item">F<a href="Interactable.html#origin">origin</a></li><li class="nav-item">F<a href="Interactable.html#preventDefault">preventDefault</a></li><li class="nav-item">F<a href="Interactable.html#rectChecker">rectChecker</a></li><li class="nav-item">F<a href="Interactable.html#resizable">resizable</a></li><li class="nav-item">F<a href="Interactable.html#set">set</a></li><li class="nav-item">F<a href="Interactable.html#styleCursor">styleCursor</a></li><li class="nav-item">F<a href="Interactable.html#unset">unset</a></li><li class="nav-heading">C<a href="InteractEvent.html">InteractEvent</a></li><li class="nav-item">F<a href="InteractEvent.html#stopImmediatePropagation">stopImmediatePropagation</a></li><li class="nav-item">F<a href="InteractEvent.html#stopPropagation">stopPropagation</a></li><li class="nav-heading">C<a href="Interaction.html">Interaction</a></li><li class="nav-item">F<a href="Interaction.html#doMove">doMove</a></li><li class="nav-item">F<a href="Interaction.html#end">end</a></li><li class="nav-item">F<a href="Interaction.html#start">start</a></li><li class="nav-item">F<a href="Interaction.html#stop">stop</a></li><li class="nav-heading">C<a href="module.exports_module.exports.html">exports</a></li><li class="nav-heading">Modules</li><li class="nav-heading">M<a href="module-interact.html">interact</a></li><li class="nav-item">F<a href="module-interact.html#.debug">debug</a></li><li class="nav-item">F<a href="module-interact.html#.dynamicDrop">dynamicDrop</a></li><li class="nav-item">F<a href="module-interact.html#.isSet">isSet</a></li><li class="nav-item">F<a href="module-interact.html#.maxInteractions">maxInteractions</a></li><li class="nav-item">F<a href="module-interact.html#.off">off</a></li><li class="nav-item">F<a href="module-interact.html#.on">on</a></li><li class="nav-item">F<a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></li><li class="nav-item">F<a href="module-interact.html#.stop">stop</a></li><li class="nav-item">F<a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></li><li class="nav-item">F<a href="module-interact.html#.supportsTouch">supportsTouch</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#interact">interact</a></li> </nav> <div class="code-col-bg"></div> <div id="main"> <h1 class="page-title">src/actions/drag.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>const actions = require('./base'); const utils = require('../utils'); const InteractEvent = require('../InteractEvent'); /** @lends Interactable */ const Interactable = require('../Interactable'); const Interaction = require('../Interaction'); const defaultOptions = require('../defaultOptions'); const drag = { defaults: { enabled : false, mouseButtons: null, origin : null, snap : null, restrict : null, inertia : null, autoScroll: null, startAxis : 'xy', lockAxis : 'xy', }, checker: function (pointer, event, interactable) { const dragOptions = interactable.options.drag; return dragOptions.enabled ? { name: 'drag', axis: (dragOptions.lockAxis === 'start' ? dragOptions.startAxis : dragOptions.lockAxis)} : null; }, getCursor: function () { return 'move'; }, }; Interaction.signals.on('before-action-move', function ({ interaction }) { if (interaction.prepared.name !== 'drag') { return; } const axis = interaction.prepared.axis; if (axis === 'x') { interaction.curCoords.page.y = interaction.startCoords.page.y; interaction.curCoords.client.y = interaction.startCoords.client.y; interaction.pointerDelta.page.speed = Math.abs(interaction.pointerDelta.page.vx); interaction.pointerDelta.client.speed = Math.abs(interaction.pointerDelta.client.vx); interaction.pointerDelta.client.vy = 0; interaction.pointerDelta.page.vy = 0; } else if (axis === 'y') { interaction.curCoords.page.x = interaction.startCoords.page.x; interaction.curCoords.client.x = interaction.startCoords.client.x; interaction.pointerDelta.page.speed = Math.abs(interaction.pointerDelta.page.vy); interaction.pointerDelta.client.speed = Math.abs(interaction.pointerDelta.client.vy); interaction.pointerDelta.client.vx = 0; interaction.pointerDelta.page.vx = 0; } }); // dragmove InteractEvent.signals.on('new', function ({ iEvent, interaction }) { if (iEvent.type !== 'dragmove') { return; } const axis = interaction.prepared.axis; if (axis === 'x') { iEvent.pageY = interaction.startCoords.page.y; iEvent.clientY = interaction.startCoords.client.y; iEvent.dy = 0; } else if (axis === 'y') { iEvent.pageX = interaction.startCoords.page.x; iEvent.clientX = interaction.startCoords.client.x; iEvent.dx = 0; } }); /** * ```js * 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 * ``` * * Get or set whether drag actions can be performed on the target * * @param {boolean | object} [options] true/false or An object with event * listeners to be fired on drag events (object makes the Interactable * draggable) * @return {boolean | Interactable} boolean indicating if this can be the * target of drag events, or this Interctable */ Interactable.prototype.draggable = function (options) { if (utils.is.object(options)) { this.options.drag.enabled = options.enabled === false? false: true; this.setPerAction('drag', options); this.setOnEvents('drag', options); if (/^(xy|x|y|start)$/.test(options.lockAxis)) { this.options.drag.lockAxis = options.lockAxis; } if (/^(xy|x|y)$/.test(options.startAxis)) { this.options.drag.startAxis = options.startAxis; } return this; } if (utils.is.bool(options)) { this.options.drag.enabled = options; if (!options) { this.ondragstart = this.ondragstart = this.ondragend = null; } return this; } return this.options.drag; }; actions.drag = drag; actions.names.push('drag'); utils.merge(Interactable.eventTypes, [ 'dragstart', 'dragmove', 'draginertiastart', 'draginertiaresume', 'dragend', ]); actions.methodDict.drag = 'draggable'; defaultOptions.drag = drag.defaults; module.exports = drag; </code></pre> </article> </section> </div> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>