Skip to main content

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