Class: UWA.Controls.Drag

UWA/Controls/Drag. UWA.Controls.Drag

new UWA.Controls.Drag(options)

Low level cross-Platform API for DOM Elements Drag and Drop.

Features: - Support touch and mouse platform

Dragging process:

         o
         v
       start
      __| |__
     |       |
     v       v
    snap    cancel
     |       |
     v       |
    move <-- |
     | |___| |
     v       |
    stop     |
     |__   __|
        | |
        v v
       reset
         v
         o
Example
new Drag({
    // Start dragging by clicking on any element matching this selector
    delegate: '.moveme, .moveme > *',

    move: function (position) {
        console.log(position);
    }
});
Parameters
Name Type Description
options Object

Options hash or a option/value pair.

Properties
Name Type Argument Default Description
mouseSnap String <optional>
 10

Amount of pixels before the dragging actually starts. If mouseDelay is greater than 0, this is the amount of pixels before the drag is cancelled if dragged before the delay is finished.
touchSnap String <optional>
 20

Same as mouseSnap but for touch events.
mouseDelay Number <optional>
 0

Delay, in ms, before the dragging actually start
touchDelay Number <optional>
 300

Same as mouseDelay but for touch events.
delegate String <optional>
 '*'

CSS selector run against the target of the event target, to determine if it is a draggable element or not.
document Element <optional>
 document

The higher element where we can put events. Used to attach the move and stop events, and to prevent the click on capture capable browsers.
root Element <optional>
 document.body

Root element of CSS queries, and used to store temporary DOM on IE on browser who can't capture events (IE).
element Element <optional>
 root

Where to attach the start event.

Mixes In

  • UWA.Class.Options

Index

Members

Methods

Members

start

Called when the drag starts.

move

Called when the drag moves.

stop

Called when the drag stops.

cancel

Called when the drag is cancelled (stoped before it snapped).

Methods

setOptions(Object) → {this}

Set the options.

Parameters
Name Type Description
Object options

The options to use
Returns
Type
this

destroy()

Destroy this instance. Do not use it afterward.

attach() → {this}

Attach the event to start dragging the element.

Returns
Type
this

detach() → {this}

Detach all events. The element won't be draggable anymore.

Returns
Type
this

snap(position, delta)

Called when the drag is snapping (the user exceeded the drag threshold).

Parameters
Name Type Description
position Object

{x: Number, y: Number}: the current position
delta Object

{x: Number, y: Number}: the difference between starting position and the current position

reset()

Called after each drag process to re-initialize the instance.

onStart(e)

Called in the "mousedown" event. It essentially binds the "mouseup" and "mousemove" events.

Parameters
Name Type Description
e Event

DOM event

onMove(e)

Called in the "mousemove" event. Checks the snap threshold and call the right methods.

Parameters
Name Type Description
e Evente

DOM event

onStop(e)

Called in the "mouseup" event. Stops the process.

Parameters
Name Type Description
e Evente

DOM event