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