JAVASCRIPT
A component for dragging things around, dropping them in dropzones, and sorting them.
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
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").
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 |
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 draggedoptions.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 cloneoptions.onDrag
Called when dragging starts. Takes an `{ dragItem, dropZone }` object.options.onDrag
Called when dragging ends. Takes an `{ origin, dragItem, dropZone }` object.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
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>
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
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>
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
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 your DragDrop, removing it from the DOM
Returns what element the user is dragging, or null
if no drag is occurring.
Get the dropZone containing the given element.
dragItem
{Element} The dragItem to find the dropZone ofReturns 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
elm
{Element} The element to test.