Sortable list

A reusable list component for sorting

MDL-51803

3.7

How it works

The sortable lists can be used for horizontal and vertical ordering of list elements. The key element of using a sortable list is to provide drag handles to list items. These can be included using the core drag_handle template.

Source files

/lib/amd/src/sortable_lists.js
/lib/templates/drag_handle.mustache

Usage

The sortable list AMD module can be loaded in your template or via a amd init call. The list to be sorted is passed as the first argument to

// Default config, this variable is optional.
var config = {
    targetListSelector: null,
    moveHandlerSelector: '[data-drag-type=move]',
    isHorizontal: false,
    autoScroll: true
};
new SortableList(domElement, config);

The events listed below can be used to connect the sortable list to a webserver handling changed positions of your sortable list items.

Events

Event type	Description
SortableList.EVENTS.DRAGSTART	This event fires immediately when user started dragging a list element.
SortableList.EVENTS.DRAG	This event is fired when user dragged a list element to a new position.
SortableList.EVENTS.DROP	This event is fired when user dropped a list element
SortableList.EVENTS.DROPEND	This event is fired when user finished dragging - either fired right after dropping or if "Esc" was pressed during dragging

Examples

1. Cras justo odio
2. Dapibus ac facilisis in
3. Morbi leo risus
4. Porta ac consectetur ac
5. Vestibulum at eros

{{#js}} require( [ 'jquery', 'core/sortable_list', ], function( $, SortableList ) { new SortableList('ul.my-draggable-list-ex'); $('ul.my-draggable-list-ex > *').on(SortableList.EVENTS.DROP, function(evt, info) { console.log(info); }); }); {{/js}}

<div class="row w-50">
  <div class="col-md-6">
    <ul class="list-group my-draggable-list-ex">
        <li class="list-group-item">
            <span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="1. Cras justo odio">
                <i class="fa fa-arrows"></i>
            </span>
            1. Cras justo odio
        </li>
        <li class="list-group-item">
            <span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="2. Dapibus ac facilisis in">
                <i class="fa fa-arrows"></i>
            </span>
            2. Dapibus ac facilisis in
        </li>
        <li class="list-group-item">
            <span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="3. Morbi leo risus">
                <i class="fa fa-arrows"></i>
            </span>
            3. Morbi leo risus
        </li>
        <li class="list-group-item">
            <span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="4. Porta ac consectetur ac">
                <i class="fa fa-arrows"></i>
            </span>
            4. Porta ac consectetur ac
        </li>
        <li class="list-group-item">
            <span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="5. Vestibulum at eros">
                <i class="fa fa-arrows"></i>
            </span>
            5. Vestibulum at eros
        </li>
    </ul>
  </div>
</div>

{{#js}}
require(
[
    'jquery',
    'core/sortable_list',
],
function(
    $,
    SortableList
) {
     new SortableList('ul.my-draggable-list-ex');

     $('ul.my-draggable-list-ex > *').on(SortableList.EVENTS.DROP, function(evt, info) {
        console.log(info);
     });
});
{{/js}}