new Ink.UI.SortableList(selector)

Accepts

• 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>

.destroy() method

Unregisters the component and removes its markup