new core/sortable_list()

  • A javascript module to handle list items drag and drop

    Example of usage:

    Create a list (for example <ul> or <tbody>) where each draggable element has a drag handle. The best practice is to use the template core/drag_handle: $OUTPUT->render_from_template('core/drag_handle', ['movetitle' => get_string('movecontent', 'moodle', ELEMENTNAME)]);

    Attach this JS module to this list:

    Space between define and ( critical in comment but not allowed in code in order to function correctly with Moodle's requirejs.php

    For the full list of possible parameters see var defaultParameters below.

    The following jQuery events are fired:

    • SortableList.EVENTS.DRAGSTART : when user started dragging a list element
    • SortableList.EVENTS.DRAG : when user dragged a list element to a new position
    • SortableList.EVENTS.DROP : when user dropped a list element
    • SortableList.EVENTS.DROPEND : when user finished dragging - either fired right after dropping or if "Esc" was pressed during dragging
  • GNU GPL v3 or later
define (['jquery', 'core/sortable_list'], function($, SortableList) {
    var list = new SortableList(''); // source list (usually <ul> or <tbody>) - selector or element

    // Listen to the events when element is dragged.
    $(' > *').on(SortableList.EVENTS.DROP, function(evt, info) {

    // Advanced usage. Overwrite methods getElementName, getDestinationName, moveDialogueTitle, for example:
    list.getElementName = function(element) {
        return $.Deferred().resolve(element.attr('data-name'));