JAVASCRIPT
Sortable lists
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
Adds sortable behaviour to any list.
Method name | Description |
---|---|
new SortableList(selector) | Constructor |
.destroy() | Unregisters the component and removes its markup |
selector
The list you wish to be sortable.options.placeholderClass
CSS class added to the "ghost" element being dragged around. Defaults to 'placeholder'.options.draggedClass
CSS class added to the original element being dragged around. Defaults to 'hide-all'.options.draggingClass
CSS class added to the html element when the user is dragging. Defaults to 'dragging'.options.dragSelector
CSS selector for the drag enabled nodes. Defaults to 'li'.options.handleSelector
CSS selector for the drag handle. If present, you can only drag nodes by this selector.options.moveSelector
CSS selector to validate a node move. If present, you can only move nodes inside this selector.options.swap
Flag to swap dragged element and target element instead of reordering it.options.cancelMouseOut
Flag to cancel draggin if mouse leaves the container element.options.onDrop
Callback to be executed after dropping an element. Receives { droppedElement: Element } as an argument.Demo
Code
<ul class="unstyled ink-sortable-list" id="my-sortable-list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<script>
// Not needed if you're using autoload.js
Ink.requireModules( ['Ink.UI.SortableList_1'], function( SortableList ){
var sortableListObj = new SortableList('#my-sortable-list');
});
</script>
If you need to create an handle-like area to drag items check the example below.
Demo
Code
<ul class="unstyled ink-sortable-list" id="my-sortable-list-handles" data-handle-selector=".ink-label">
<li><span class="ink-label blue">Drag here</span> First</li>
<li><span class="ink-label blue">Drag here</span> Second</li>
<li><span class="ink-label blue">Drag here</span> Third</li>
</ul>
<script>
// Not needed if you're using autoload.js
Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.SortableList_1'], function( Selector, SortableList ){
var sortableListElement = Ink.s('#my-sortable-list-handles');
var sortableListObj = new SortableList( sortableListElement );
});
</script>
Unregisters the component and removes its markup