Draggable (params) documon/template/assets/js/documon/Draggable.js 37
xpath root.Draggable
file documon/template/assets/js/documon/Draggable.js

Makes a DOM Element draggable. NOTE: This is a stand-alone implementation. The jbeeb.utils.Draggable class is used for jbeeb objects. Whereas this class can be used on any DOM element (outside of jbeeb).

Parameters
params
Object

Configuration settings.

params properties
target
string | DOM Element

The element to move. String = the ID of the element, or send in the DOM element directly.

callback
function

A function to ping for each kind of operation. See (callback)[#callback] for details.

constrain
string

Constrain movement along the "x" or "y" axis. Both constrain and constrainRect can be used together or independantly.

constrainRect
Object

Constrain movement within a rectangle. The rectangle can be any object (including a DisplayObject) that contains the following properties x, y, width, height

threshold
number 5

The pixel threshold for issuing the "didMove" flag on "end"

arg
any

A custom argument to be delivered to the (callback)[#callback].

Example
    var myDrag = new documon.Draggable({
          target    : obj 
        , callback  : fn
        , constrain : "x"
        , constrainRect : obj
        , threshold : 5
    });
Properties
_callback
documon/template/assets/js/documon/Draggable.js126
function private

Configured callback

_callbackArg
documon/template/assets/js/documon/Draggable.js132
function private

Configured argument to send to the (callback)[#callback].

_constrain
documon/template/assets/js/documon/Draggable.js138
object private

_constrain

_constrainRect
documon/template/assets/js/documon/Draggable.js144
object private

_constrainRect

_didInitMove
documon/template/assets/js/documon/Draggable.js189
object private

_didInitMove

_didMove
documon/template/assets/js/documon/Draggable.js176
object private

_didMove

_didMoveFudge
documon/template/assets/js/documon/Draggable.js183
object private

_didMoveFudge

_didMoveThreshold
documon/template/assets/js/documon/Draggable.js195
function private 5

The pixel threshold for issuing the "didMove" flag on "end"

_down_bound
documon/template/assets/js/documon/Draggable.js201
object private

_down_bound

_mask
documon/template/assets/js/documon/Draggable.js220
DOM Element private

The overlay masking object used to reject mouse events on underlaying DOM elements.

_move_bound
documon/template/assets/js/documon/Draggable.js214
object private

_move_bound

_startMouseX
documon/template/assets/js/documon/Draggable.js163
object private

_startMouseX

_startMouseY
documon/template/assets/js/documon/Draggable.js170
object private

_startMouseY

_startX
documon/template/assets/js/documon/Draggable.js150
object private

_startX

_startY
documon/template/assets/js/documon/Draggable.js157
object private

_startY

_target
documon/template/assets/js/documon/Draggable.js120
DOM Element private

The object we're going to drag.

_up_bound
documon/template/assets/js/documon/Draggable.js208
object private

_up_bound

Methods
_down (evt) private documon/template/assets/js/documon/Draggable.js 268

The mouse "down" listener function

Parameters
evt
MouseEvent

evt

_initMove (evt) private documon/template/assets/js/documon/Draggable.js 285

A one-time setup to extablish the starting position and create the (mask)[#maks].

Parameters
evt
MouseEvent

Transfered from teh "move" listener.

_move (evt) private documon/template/assets/js/documon/Draggable.js 325

The mouse "move" listener function

Parameters
evt
MouseEvent

evt

_up (evt) private documon/template/assets/js/documon/Draggable.js 398

The mouse "up" listener function

Parameters
evt
MouseEvent

evt

callback (obj, pos, kind, didmove, arg) protected documon/template/assets/js/documon/Draggable.js 257

The function to ping when an operation occurs.

Parameters
obj
object

The internal object we use to manage the

pos
object

An object with the following properties: left, top

kind
string

The kind of operation that occured. Can be "start" | "end" | "move"

didmove
boolean

Indicates if the item was simply clicked, or if it was dragged. Only issued when event == "end"

arg
any

The argument that was defined during initialization.

destroy () documon/template/assets/js/documon/Draggable.js 442

Destroys and removes listeners.

init (params) protected documon/template/assets/js/documon/Draggable.js 229

Initialize

Parameters
params
object

See main class description for details.

parsePos (elem) private documon/template/assets/js/documon/Draggable.js 83

Gets the CSS position (releative) of a DOM Element.

Parameters
elem
DOM Element

The element

setConstrain (val) documon/template/assets/js/documon/Draggable.js 434

Causes the movement to be contrained along the X or Y axis.

Parameters
val
string

Use "x" or "y". Use "null" or no argument to clear contstraint.

setConstrainRect (val) documon/template/assets/js/documon/Draggable.js 425

Sets the rectangle used to for the boundaries that the item can move within.

Parameters
val
Object

An object containing the following properties: x, y, width, height. Use "null" or no argument to clear contstraint.

setX (evt, val) private documon/template/assets/js/documon/Draggable.js 48

Shortcut to set the style position.

Parameters
evt
DOM Element

The element to move.

val
number

The x position in pixels.

setXY (evt, x, x) private documon/template/assets/js/documon/Draggable.js 71

Shortcut to set the style position.

Parameters
evt
DOM Element

The element to move.

x
number

The x position in pixels.

x
number

The y position in pixels.

setY (evt, val) private documon/template/assets/js/documon/Draggable.js 59

Shortcut to set the style position.

Parameters
evt
DOM Element

The element to move.

val
number

The y position in pixels.

Generated by Documon