core/sortable_list

core/sortable_list

new core/sortable_list()

Source:
Copyright:
  • 2018 Marina Glancy
License:
  • http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

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

More details: https://docs.moodle.org/dev/Sortable_list

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
Example
define (['jquery', 'core/sortable_list'], function($, SortableList) {
    var list = new SortableList('ul.my-awesome-list'); // source list (usually <ul> or <tbody>) - selector or element

    // Listen to the events when element is dragged.
    $('ul.my-awesome-list > *').on(SortableList.EVENTS.DROP, function(evt, info) {
        console.log(info);
    });

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