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

Ink.UI.DragDrop class

A replacement for Draggables, Droppables, and SortableList. It aims to be good at creating draggables, droppables and sortable lists at the same time while keeping it simple for everyone.

A DragDrop component may contain one or more "dropZone"s, which are the areas where the "dragItem"s can be dropped. You can identify elements as being a dropZone or a dragItem by using the correct selectors (".drag-item" and ".drop-zone").

Methods
Method name	Description
new DragDrop([element], [options])	Constructor
.destroy()	Destroy your DragDrop, removing it from the DOM
.getDraggedElement()	Returns what element the user is dragging, or `null` if no drag is occurring.
.getDropZone(dragItem)	Get the dropZone containing the given element.
.isDragItem(elm)	Returns whether a given .drag-item element is a plain old .drag-item element

new Ink.UI.DragDrop([element], [options])

Accepts

element
Root element for the DragDrop. It can contain one or more dropzones.
options
Options object, containing:
options.dragItem
'.drag-item'Selector for the items to be dragged
options.dragHandle
'.drag-handle'Selector for a dragging handle. You won't be able to drag other parts of the dragItem.
options.dropZone
'.drop-zone'Selector of drop zones. Should add this to the element itself.
options.ignoreDrag
'.drag-ignore'Selector of places where you can't drag.
options.draggedCloneClass
'drag-cloned-item'Class for the cloned (and position:fixed'ed) element.
options.placeholderClass
'drag-placeholder-item'Class for the placeholder clone
options.onDrag
Called when dragging starts. Takes an `{ dragItem, dropZone }` object.
options.onDrag
Called when dragging ends. Takes an `{ origin, dragItem, dropZone }` object.

Basic example

To create a DragDrop, you need at least a root element, and a set of elements with the drag-item class.

This is done through adding the drag-handle class.

Demo

drag-item 1

drag-item 2

drag-item 3

drag-item 4

Code

<div class="ink-dragdrop drop-zone" id="demo-dragdrop">
    <div class="drag-item all-100">drag-item 1</div>
    <div class="drag-item all-100">drag-item 2</div>
    <div class="drag-item all-100">drag-item 3</div>
    <div class="drag-item all-100">drag-item 4</div>
</div>
<script>
    Ink.requireModules(['Ink.UI.DragDrop_1'], function (DragDrop) {
        new DragDrop('#demo-dragdrop');
    });
</script>

Multiple drop zones

DragDrop works with multiple drop zones, if you want. Elements with the class drop-zone are considered drop-zones, and dragged items will be placed in them.

By default, there is only one drop-zone which will be the root element. This is to ease development and avoid people having to create wrapper elements.

Demo

Left sort item 1
Left sort item 2
Left sort item 3

Right sort item 1
Right sort item 2
Right sort item 3

Code

<div class="column-group gutters" id="demo-dragdrop-3">
    <div class="all-50">
        <ul class="drop-zone unstyled" style="min-height: 30px;">
            <li class="drag-item ink-label green">Left sort item 1</li>
            <li class="drag-item ink-label green">Left sort item 2</li>
            <li class="drag-item ink-label green">Left sort item 3</li>
        </ul>
    </div>
    <div class="all-50">
        <ul class="drop-zone unstyled" style="min-height:30px;;">
            <li class="drag-item ink-label blue">Right sort item 1</li>
            <li class="drag-item ink-label blue">Right sort item 2</li>
            <li class="drag-item ink-label blue">Right sort item 3</li>
        </ul>
    </div>
</div>
<script>
    Ink.requireModules(['Ink.UI.DragDrop_1'], function (DragDrop) {
        new DragDrop('#demo-dragdrop-3');
    });
</script>

drag-handle example

You can only drag these items by their handle. This is useful if you want the user to interact with some parts of the drag-item, but enable them to drag the drag-item by a handle.

This is done through by adding the drag-handle class.

Demo

Drag me 1

Drag me 2

Drag me 3

Drag me 4

Drag me 5

Drag me 6

Drag me 7

Drag me 8

Drag me 9

Code

<div class="column-group drop-zone gutters" id="demo-dragdrop-2">
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 1</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 2</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 3</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 4</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 5</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 6</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 7</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 8</h3></div>
    <div class="all-20 medium-33 small-50 tiny-100 drag-item"><h3><i class="fa fa-arrows drag-handle"></i> Drag me 9</h3></div>
</div>

<script>
    Ink.requireModules(['Ink.UI.DragDrop_1'], function (DragDrop) {
        new DragDrop('#demo-dragdrop-2');
    });
</script>

.destroy() method

Destroy your DragDrop, removing it from the DOM

.getDraggedElement() method

Returns what element the user is dragging, or null if no drag is occurring.

.getDropZone(dragItem) method

Get the dropZone containing the given element.

Accepts

dragItem
{Element} The dragItem to find the dropZone of

.isDragItem(elm) method

Returns whether a given .drag-item element is a plain old .drag-item element
and not one of the clones we're creating or the element we're really dragging.

Used because the selector ".drag-item" finds these elements we don't consider drag-items

Accepts

elm
{Element} The element to test.