Draggable

Makes added render nodes responsive to drag beahvior. Emits events 'start', 'update', 'end'.

Overview

Options
snapX
snapY
xRange] maxmimum [negative, positive
yRange] maxmimum [negative, positive
scale
projection
Methods
setOptions
getPosition
setRelativePosition
setPosition
activate
deactivate
toggle

Draggable(options)

Constructor Parameters

options

Object

options configuration object.

snapX
Number
grid width for snapping during drag
snapY
Number
grid height for snapping during drag
xRange] maxmimum [negative, positive
Array.Number
x displacement from start of drag
yRange] maxmimum [negative, positive
Array.Number
y displacement from start of drag
scale
Number
one pixel of input motion translates to this many pixels of output drag motion
projection
Number
User should set to Draggable._direction.x or Draggable._direction.y to constrain to one axis.
Methods

setOptions(options)

Set internal options, overriding any default options

Parameters
options
Object
overrides of default options. See constructor.

getPosition()

Get current delta in position from where this draggable started.

Returns
Array<number>
[x, y] position delta from start.

setRelativePosition(position, transition, callback)

Transition the element to the desired relative position via provided transition. For example, calling this with [0,0] will not change the position. Callback will be executed on completion.

Parameters
position
Array<number>
end state to which we interpolate
transition
Transition
transition object specifying how object moves to new position
callback
Function
zero-argument function to call on observed completion

setPosition(position, transition, callback)

Transition the element to the desired absolute position via provided transition. Callback will be executed on completion.

Parameters
position
Array<number>
end state to which we interpolate
transition
Transition
transition object specifying how object moves to new position
callback
Function
zero-argument function to call on observed completion

activate()

Set this draggable to respond to user input.

deactivate()

Set this draggable to ignore user input.

toggle()

Switch the input response stage between active and inactive.