Movements

Advanced events and handlers for drag and swipe interaction.

Just detecting the movement isn't enough if you want a nice and real-time responsive user experience. Manipulator provides speed-calculation, vertical/horisontal locking, simple boundary settings and callbacks for each step of the interaction, picked, moved and dropped and for swipes additionally swipedLeft, swipedRight, swipedUp or swipedDown. It also has the ability to calculate a final end position based on acceleration at the drop event.

Manipulator also includes an overlap detection method, which helps you to know whether a dragged element is overlapping another element.

Functions

Util.Events.drag

Definition

Name
Util.Events.drag
Shorthand
u.e.drag
Syntax
Void = Util.Events.drag( Node node, Mixed boundaries [, JSON _options ] );

Description

Make node draggable, within the defined boundaries.

If your scripts are using the Manipulator Google Analytics module, the drop-event will be registered automatically (see Parameters for options).

Parameters

node
Node node to make draggable
boundaries
Mixed Array or Node to use as drag boundaries
Options
Node
Node used as boundaries
Array
Array containing left, top, right, bottom coordinates to be used as boundaries
_options
JSON Optional, JSON object with drag-settings
Options
strict
Default true, Node will follow mouse strictly. If false, node will be projected to end coordinates based on drag speed.
overflow
Default false, Boundaries state outer moving limit. If set to scroll, node will be perceived as a scrollable element – and dragging will only be applied if the draggable element is bigger than the boundaries.
elastica
Elastic boundaries allowing you to drag node over boundaries and snapping back on drop
dropout
Drop node if mouseout event occurs while dragging
show_bounds
Show boundaries - for debugging your boundaries
ready
ready event custom callback function name
picked
picked event custom callback function name
moved
moved event custom callback function name
dropped
dropped event custom callback function name
eventCategory
Category label for tracking. Default: Uncategorized
eventAction
Action label for tracking. Default: DblClicked
eventLabel
Additional label for tracking. Default: event.target.url or small except of node content
eventValue
Value label for tracking. Default: Null
nonInteraction
nonInteraction value for tracking. Default: false
hitCallback
Callback for successful tracking. Default: null

Return values

Void

Callbacks

node.ready(event)
when drag options are setup up
node.picked(event)
when mousedown or touchstart event occurs
node.moved(event)
when movement occurs after mousedown or touchstart
node.dropped(event)
when node is dropped
node.inputStarted(event)
when mousedown or touchstart event occurs
node.clickCancelled(event)
when event is cancelled automatically

Examples

<div class="scene"> <div class="node"></div> </div> <script> var scene = u.querySelector(".scene"); var node = u.querySelector(".node"); u.e.drag(node, scene); node.picked = function(event) { // invoked when node is picked } node.moved = function(event) { // invoked when node is moved } node.dropped = function(event) { // invoked when node is dropped } </script>

Enable dragging of div.node inside div.scene.

<div class="scene"> <div class="node"></div> </div> <script> var scene = u.querySelector(".scene"); var node = u.querySelector(".node"); u.e.drag(node, scene, {"overflow":"scroll"}); </script>

Enable scrolling of div.node inside div.scene – if node is larger than scene.

Dependencies

JavaScript
  • switch ... case
  • document.constructor
  • document.constructor.toString
  • String.match
  • document.childNodes
  • Math.abs
  • Math.round
Manipulator
  • Util.absoluteX
  • Util.absoluteY
  • Util.eventX
  • Util.eventY
  • Util.Events.addEvent
  • Util.Events.addStartEvent
  • Util.Events.addMoveEvent
  • Util.Events.addEndEvent
  • Util.Events.addEvent
  • Util.Events.resetNestedEvents
  • Util.Events.overlap
  • Util.Animation.translate
  • Util.Animation.transition

Util.Events.swipe

Definition

Name
Util.Events.swipe
Shorthand
u.e.swipe
Syntax
Void = Util.Events.swipe( Node node, Mixed boundaries [, JSON _options ] );

Description

Make node swipeable, within defined boundaries.

If your scripts are using the Manipulator Google Analytics module, the swiped-event will be registered automatically (see Parameters for options).

Parameters

node
Node node to make swipeable
boundaries
Mixed Array or Node to use as swipe boundaries
Options
Node
Node used as boundaries
Array
Array containing left, top, righ, bottom coordinates to be used as boundaries
_options
JSON Optional, JSON object with swipe-settings
Options
elastica
Elastic boundaries allowing you to drag node over boundaries and snapping back on drop
dropout
Drop node if mouseout event occurs while dragging
show_bounds
Show boundaries - for debugging your boundaries
picked
picked event custom callback function name
moved
moved event custom callback function name
dropped
dropped event custom callback function name
eventCategory
Category label for tracking. Default: Uncategorized
eventAction
Action label for tracking. Default: DblClicked
eventLabel
Additional label for tracking. Default: event.target.url or small except of node content
eventValue
Value label for tracking. Default: Null
nonInteraction
nonInteraction value for tracking. Default: false
hitCallback
Callback for successful tracking. Default: null

Return values

Void

Callbacks

node.picked(event)
when mousedown or touchstart event occurs
node.moved(event)
when movement occurs after mousedown or touchstart
node.dropped(event)
when node is dropped
node.swipedUp(event)
when node is swiped up
node.swipedDown(event)
when node is swiped down
node.swipedLeft(event)
when node is swiped left
node.swipedRight(event)
when node is swiped right
node.inputStarted(event)
when mousedown or touchstart event occurs
node.clickCancelled(event)
when event is cancelled automatically

Examples

<div class="scene"> <div class="node"></div> </div> <script> var scene = u.querySelector(".scene"); var node = u.querySelector(".node"); u.e.swipe(node, scene); node.swipedUp = function(event) { // invoked when node is picked } node.swipedDown = function(event) { // invoked when node is moved } </script>

Enable swiping of div.node inside div.scene.

Dependencies

JavaScript

none

Manipulator
  • Util.Events.drag

Util.Events.resetDragEvents

Definition

Name
Util.Events.resetDragEvents
Shorthand
u.e.resetDragEvents
Syntax
Void = Util.Events.resetDragEvents( Node node );

Description

Reset all drag-related events on node, returning them to their initial state. You can use this on nodes with multiple drag-handlers if you need an advanced level of event handling.

Most basic event handling and cancellation is automatically handled by the existing functions - this function is only relevant in edge case scenarios.

Parameters

node
Node node to reset drag events on

Return values

Void

Examples

No examples

Dependencies

JavaScript

none

Manipulator
  • Util.Events.removeEvent

Util.Events.overlap

Definition

Name
Util.Events.overlap
Shorthand
u.e.overlap
Syntax
Boolean = Util.Events.overlap( Node node, Mixed boundaries [, Boolean strict ] );

Description

Detect overlap between node and boundaries. Boundaries can be other node or Array of coordinates. Use strict to detect partial or complete overlaps.

Parameters

node
Node node to detect overlap of
boundaries
Mixed Array or Node to use for overlap detection
Options
Node
Node used as boundaries
Array
Array containing left, top, righ, bottom coordinates to be used as boundaries
strict
Boolean Optional true to detect complete overlap only. Default is false, detecting partial overlap.

Return values

Boolean true for overlap, false for no overlap

Examples

No examples

Dependencies

JavaScript
  • document.constructor
  • document.constructor.toString
  • String.match
Manipulator

none

Util.Events.setDragBoundaries

Definition

Name
Util.Events.setDragBoundaries
Shorthand
u.e.setDragBoundaries
Syntax
Void = Util.Events.setDragBoundaries( Node node, Mixed boundaries );

Description

Set drag boundaries for node. This can be used to update drag boundaries if conditions change during user interaction.

Parameters

node
Node node to set boundaries for
boundaries
Mixed Array or Node to use as drag boundaries
Options
Node
Node used as boundaries
Array
Array containing left, top, right, bottom coordinates to be used as boundaries

Return values

Void

Examples

<div class="scene"> <div class="node"></div> </div> <script> var scene = u.querySelector(".scene"); var node = u.querySelector(".node"); u.e.setDragBoundaries(node, scene); </script>

Update drag boundaries for node, using curent size of scene.

Dependencies

JavaScript
  • document.constructor
  • document.constructor.toString
  • String.match
Manipulator

none

Util.Events.setDragPosition

Definition

Name
Util.Events.setDragPosition
Shorthand
u.e.setDragPosition
Syntax
Void = Util.Events.setDragPosition( Node node, Integer x, Integer y );

Description

Set drag position for node. This can be used to set (or reset) the current position of node.

Parameters

node
Node node to set boundaries for
x
Integer x-coordinate to move node to
y
Integer y-coordinate to move node to

Return values

Void

Examples

No examples

Dependencies

JavaScript

none

Manipulator
  • u.a.translate

Files

Main file

  • u-events-movements.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
desktop_ie11
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
desktop
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
desktop_ie10
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
desktop_ie9
u-events-movements.js + u-events.js + u-animation.js + u-animation-desktop_ie9.js + u-dom.js + u-dom-desktop_ie.js + u-timer.js + u-geometry.js
desktop_light
not supported
tablet
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
tablet_light
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
smartphone
u-events-movements.js + u-events.js + u-animation.js + u-geometry.js
mobile
not tested
mobile_light
not supported
tv
not tested
seo
not supported