All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Draggable class

Methods
Method name	Description
new Draggable(target, [options])	Constructor
.destroy()	Removes the ability of the element of being dragged

new Ink.UI.Draggable(target, [options])

Accepts

target
Target element.
options
Optional object to configure the component.
options.constraint
Movement constraint. None by default. Can be `vertical`, `horizontal`, or `both`.
options.constraintElm
Constrain dragging to be within this element. None by default.
options.top
Limits to constrain draggable movement.
options.right
Limits to constrain draggable movement.
options.bottom
Limits to constrain draggable movement.
options.left
Limits to constrain draggable movement.
options.handle
If specified, this element or CSS ID will be used as a handle for dragging.
options.revert
falseFlag to revert the draggable to the original position when dragging stops.
options.cursor
'move'Cursor type (CSS `cursor` value) used when the mouse is over the draggable object.
options.zIndex
Z-index applied to the draggable element while dragged.
options.fps
If set, throttles the drag effect to this number of frames per second.
options.droppableProxy
If set, a shallow copy of this element will be moved around with transparent background.
options.mouseAnchor
Anchor for the drag. Can be one of: 'left','center','right','top','center','bottom'.
options.dragClass
Class to add when the draggable is being dragged. Defaults to drag.
options.skipChildren
trueWhether you have to drag the actual element, or dragging one of the children is okay too.
options.onStart
Callback called when dragging starts.
options.onEnd
Callback called when dragging stops.
options.onDrag
Callback called while dragging, prior to position updates.
options.onChange
Callback called while dragging, after position updates.

Demo

Draggable with { revert: true }

Draggable with { revert: false }

Code

<div id="myDraggable1" class="ink-alert basic">
    <p>Draggable with <code>{ revert: true }</code></p>
</div>

<div id="myDraggable2" class="ink-alert basic">
    <p>Draggable with <code>{ revert: false }</code></p>
</div>

<script>
    Ink.requireModules(['Ink.UI.Draggable_1'], function (Draggable) {
        new Draggable('#myDraggable1', {
            revert: true,
            skipChildren: false
        });

        new Draggable('#myDraggable2', {
            revert: false,
            skipChildren: false
        });
    });
</script>

.destroy() method

Removes the ability of the element of being dragged