Proyectos de Subversion Moodle

---
layout: docs
title: "Sortable list"
description: "A reusable list component for sorting"
date: 2020-02-04T09:40:32+01:00
draft: false
tags:
- 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

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

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

## Events

<table class="table">
  <thead>
    <tr>
      <th style="width: 150px;">Event type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SortableList.EVENTS.DRAGSTART</td>
      <td>This event fires immediately when user started dragging a list element.</td>
    </tr>
    <tr>
      <td>SortableList.EVENTS.DRAG</td>
      <td>This event is fired when user dragged a list element to a new position.</td>
    </tr>
    <tr>
      <td>SortableList.EVENTS.DROP</td>
      <td>This event is fired when user dropped a list element</td>
    </tr>
    <tr>
      <td>SortableList.EVENTS.DROPEND</td>
      <td>This event is fired when user finished dragging - either fired right after dropping or if "Esc" was pressed during dragging</td>
    </tr>
  </tbody>
</table>

## Examples

{{< example>}}
<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}}
{{< /example >}}