Merge branch 'MDL-51803-master-mouse' of git://github.com/marinaglancy/moodle

lang/en/moodle.php

@@ -1269,6 +1269,8 @@ $string['move'] = 'Move';
 $string['movecoursemodule'] = 'Move resource';
 $string['movecoursesection'] = 'Move section';
 $string['movecontent'] = 'Move {$a}';
+$string['movecontentafter'] = 'After "{$a}"';
+$string['movecontenttothetop'] = 'To the top of the list';
 $string['movecategorycontentto'] = 'Move into';
 $string['movecategorysuccess'] = 'Successfully moved category \'{$a->moved}\' into category \'{$a->to}\'';
 $string['movecategoriessuccess'] = 'Successfully moved {$a->count} categories into category \'{$a->to}\'';

lib/amd/build/autoscroll.min.js

@@ -0,0 +1 @@
+define(["jquery"],function(a){var b={SCROLL_THRESHOLD:30,SCROLL_FREQUENCY:1e3/60,SCROLL_SPEED:.5,scrollingId:null,scrollAmount:0,callback:null,start:function(c){a(window).on("mousemove",b.mouseMove),a(window).on("touchmove",b.touchMove),b.callback=c},stop:function(){a(window).off("mousemove",b.mouseMove),a(window).off("touchmove",b.touchMove),null!==b.scrollingId&&b.stopScrolling()},touchMove:function(a){for(var c=0;c<a.changedTouches.length;c++)b.handleMove(a.changedTouches[c].clientX,a.changedTouches[c].clientY)},mouseMove:function(a){b.handleMove(a.clientX,a.clientY)},handleMove:function(c,d){d<b.SCROLL_THRESHOLD?b.scrollAmount=-Math.min(b.SCROLL_THRESHOLD-d,b.SCROLL_THRESHOLD):d>a(window).height()-b.SCROLL_THRESHOLD?b.scrollAmount=Math.min(d-(a(window).height()-b.SCROLL_THRESHOLD),b.SCROLL_THRESHOLD):b.scrollAmount=0,b.scrollAmount&&null===b.scrollingId?b.startScrolling():b.scrollAmount||null===b.scrollingId||b.stopScrolling()},startScrolling:function(){var c=a(document).height-a(window).height;b.scrollingId=window.setInterval(function(){var d=a(window).scrollTop(),e=Math.round(b.scrollAmount*b.SCROLL_SPEED);if(d+e<0&&(e=-d),d+e>c&&(e=c-d),0!==e){a(window).scrollTop(d+e);var f=a(window).scrollTop()-d;0!==f&&b.callback&&b.callback(f)}},b.SCROLL_FREQUENCY)},stopScrolling:function(){window.clearInterval(b.scrollingId),b.scrollingId=null}};return{start:b.start,stop:b.stop}});

lib/amd/src/autoscroll.js

@@ -0,0 +1,209 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/*
+ * JavaScript to provide automatic scrolling, e.g. during a drag operation.
+ *
+ * Note: this module is defined statically. It is a singleton. You
+ * can only have one use of it active at any time. However, since this
+ * is usually used in relation to drag-drop, and since you only ever
+ * drag one thing at a time, this is not a problem in practice.
+ *
+ * @module     core/autoscroll
+ * @class      autoscroll
+ * @package    core
+ * @copyright  2016 The Open University
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.6
+ */
+define(['jquery'], function($) {
+    /**
+     * @alias module:core/autoscroll
+     */
+    var autoscroll = {
+        /**
+         * Size of area near edge of screen that triggers scrolling.
+         * @private
+         */
+        SCROLL_THRESHOLD: 30,
+
+        /**
+         * How frequently to scroll window.
+         * @private
+         */
+        SCROLL_FREQUENCY: 1000 / 60,
+
+        /**
+         * How many pixels to scroll per unit (1 = max scroll 30).
+         * @private
+         */
+        SCROLL_SPEED: 0.5,
+
+        /**
+         * Set if currently scrolling up/down.
+         * @private
+         */
+        scrollingId: null,
+
+        /**
+         * Speed we are supposed to scroll (range 1 to SCROLL_THRESHOLD).
+         * @private
+         */
+        scrollAmount: 0,
+
+        /**
+         * Optional callback called when it scrolls
+         * @private
+         */
+        callback: null,
+
+        /**
+         * Starts automatically scrolling if user moves near edge of window.
+         * This should be called in response to mouse down or touch start.
+         *
+         * @public
+         * @param {Function} callback Optional callback that is called every time it scrolls
+         */
+        start: function(callback) {
+            $(window).on('mousemove', autoscroll.mouseMove);
+            $(window).on('touchmove', autoscroll.touchMove);
+            autoscroll.callback = callback;
+        },
+
+        /**
+         * Stops automatically scrolling. This should be called in response to mouse up or touch end.
+         *
+         * @public
+         */
+        stop: function() {
+            $(window).off('mousemove', autoscroll.mouseMove);
+            $(window).off('touchmove', autoscroll.touchMove);
+            if (autoscroll.scrollingId !== null) {
+                autoscroll.stopScrolling();
+            }
+        },
+
+        /**
+         * Event handler for touch move.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        touchMove: function(e) {
+            for (var i = 0; i < e.changedTouches.length; i++) {
+                autoscroll.handleMove(e.changedTouches[i].clientX, e.changedTouches[i].clientY);
+            }
+        },
+
+        /**
+         * Event handler for mouse move.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        mouseMove: function(e) {
+            autoscroll.handleMove(e.clientX, e.clientY);
+        },
+
+        /**
+         * Handles user moving.
+         *
+         * @private
+         * @param {number} clientX X
+         * @param {number} clientY Y
+         */
+        handleMove: function(clientX, clientY) {
+            // If near the bottom or top, start auto-scrolling.
+            if (clientY < autoscroll.SCROLL_THRESHOLD) {
+                autoscroll.scrollAmount = -Math.min(autoscroll.SCROLL_THRESHOLD - clientY, autoscroll.SCROLL_THRESHOLD);
+            } else if (clientY > $(window).height() - autoscroll.SCROLL_THRESHOLD) {
+                autoscroll.scrollAmount = Math.min(clientY - ($(window).height() - autoscroll.SCROLL_THRESHOLD),
+                    autoscroll.SCROLL_THRESHOLD);
+            } else {
+                autoscroll.scrollAmount = 0;
+            }
+            if (autoscroll.scrollAmount && autoscroll.scrollingId === null) {
+                autoscroll.startScrolling();
+            } else if (!autoscroll.scrollAmount && autoscroll.scrollingId !== null) {
+                autoscroll.stopScrolling();
+            }
+        },
+
+        /**
+         * Starts automatic scrolling.
+         *
+         * @private
+         */
+        startScrolling: function() {
+            var maxScroll = $(document).height - $(window).height;
+            autoscroll.scrollingId = window.setInterval(function() {
+                // Work out how much to scroll.
+                var y = $(window).scrollTop();
+                var offset = Math.round(autoscroll.scrollAmount * autoscroll.SCROLL_SPEED);
+                if (y + offset < 0) {
+                    offset = -y;
+                }
+                if (y + offset > maxScroll) {
+                    offset = maxScroll - y;
+                }
+                if (offset === 0) {
+                    return;
+                }
+
+                // Scroll.
+                $(window).scrollTop(y + offset);
+                var realOffset = $(window).scrollTop() - y;
+                if (realOffset === 0) {
+                    return;
+                }
+
+                // Inform callback
+                if (autoscroll.callback) {
+                    autoscroll.callback(realOffset);
+                }
+
+            }, autoscroll.SCROLL_FREQUENCY);
+        },
+
+        /**
+         * Stops the automatic scrolling.
+         *
+         * @private
+         */
+        stopScrolling: function() {
+            window.clearInterval(autoscroll.scrollingId);
+            autoscroll.scrollingId = null;
+        }
+    };
+
+    return {
+        /**
+         * Starts automatic scrolling if user moves near edge of window.
+         * This should be called in response to mouse down or touch start.
+         *
+         * @public
+         * @param {Function} callback Optional callback that is called every time it scrolls
+         */
+        start: autoscroll.start,
+
+        /**
+         * Stops automatic scrolling. This should be called in response to mouse up or touch end.
+         *
+         * @public
+         */
+        stop: autoscroll.stop,
+    };
+
+});

lib/amd/src/sortable_list.js

@@ -0,0 +1,684 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * A javascript module to handle list items drag and drop
+ *
+ * Example of usage:
+ *
+ * define(['jquery', 'core/sortable_list'], function($, SortableList) {
+ *     var list = new SortableList('ul.my-awesome-list', // source list (usually <ul> or <tbody>) - selector or element
+ *         {
+ *             moveHandlerSelector: '.draghandle'  // CSS selector of the crossarrow handle. Make sure that this
+ *               // element can handle keypress and mouse click events for displaying accessible move popup.
+ *         });
+ *     $('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'));
+ *     }
+ * }
+ *
+ * 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
+ *
+ * @module     core/sortable_list
+ * @class      sortable_list
+ * @package    core
+ * @copyright  2018 Marina Glancy
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+define(['jquery', 'core/log', 'core/autoscroll', 'core/str', 'core/modal_factory', 'core/modal_events', 'core/notification'],
+function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
+
+    /**
+     * Default parameters
+     *
+     * @private
+     * @type {Object}
+     */
+    var defaultParameters = {
+        targetListSelector: null,
+        moveHandlerSelector: null,
+        isHorizontal: false,
+        autoScroll: true
+    };
+
+    /**
+     * Class names for different elements that may be changed during sorting
+     *
+     * @private
+     * @type {Object}
+     */
+    var CSS = {
+        keyboardDragClass: 'dragdrop-keyboard-drag',
+        isDraggedClass: 'sortable-list-is-dragged',
+        currentPositionClass: 'sortable-list-current-position',
+        sourceListClass: 'sortable-list-source',
+        targetListClass: 'sortable-list-target',
+        overElementClass: 'sortable-list-over-element'
+    };
+
+    /**
+     * Allow to create non-passive touchstart listeners and prevent page scrolling when dragging
+     * From: https://stackoverflow.com/a/48098097
+     *
+     * @type {Object}
+     */
+    $.event.special.touchstart = {
+        setup: function(_, ns, handle) {
+            if (ns.includes('notPassive')) {
+                this.addEventListener('touchstart', handle, {passive: false});
+                return true;
+            } else {
+                return false;
+            }
+        }
+    };
+
+    /**
+     * Initialise sortable list.
+     *
+     * @param {(String|jQuery|Element)} root JQuery/DOM element representing sortable list (i.e. <ul>, <tbody>) or CSS selector
+     * @param {Object} config Parameters for the list. See defaultParameters above for examples.
+     * @property {(String|jQuery|Element)} config.targetListSelector target lists, by default same as root
+     * @property {String} config.moveHandlerSelector  CSS selector for a drag handle. By default the whole item is a handle.
+     *                                                Without drag handle sorting is not accessible!
+     * @property {String} config.targetListSelector   CSS selector for target lists. By default the same as root
+     * @property {(Boolean|Function)} config.isHorizontal Set to true if the list is horizontal
+     *                                                (can also be a callback with list as an argument)
+     * @property {Boolean} config.autoScroll          Engages autoscroll module for automatic vertical scrolling of the
+     *                                                whole page, by default true
+     */
+    var SortableList = function(root, config) {
+
+        this.info = null;
+        this.proxy = null;
+        this.proxyDelta = null;
+        this.dragCounter = 0;
+        this.lastEvent = null;
+
+        this.config = $.extend({}, defaultParameters, config || {});
+        this.config.listSelector = root;
+        if (!this.config.targetListSelector) {
+            this.config.targetListSelector = root;
+        }
+        if (typeof this.config.listSelector === 'object') {
+            // The root is an element on the page. Register a listener for this element.
+            $(this.config.listSelector).on('mousedown touchstart.notPassive', $.proxy(this.dragStartHandler, this));
+        } else {
+            // The root is a CSS selector. Register a listener that picks up the element dynamically.
+            $('body').on('mousedown touchstart.notPassive', this.config.listSelector, $.proxy(this.dragStartHandler, this));
+        }
+        if (this.config.moveHandlerSelector !== null) {
+            $('body').on('click keypress', this.config.moveHandlerSelector, $.proxy(this.clickHandler, this));
+        }
+
+    };
+
+    /**
+     * Events fired by this entity
+     *
+     * @public
+     * @type {Object}
+     */
+    SortableList.EVENTS = {
+        DRAGSTART: 'sortablelist-dragstart',
+        DRAG: 'sortablelist-drag',
+        DROP: 'sortablelist-drop',
+        DRAGEND: 'sortablelist-dragend'
+    };
+
+    /**
+     * Resets the temporary classes assigned during dragging
+     * @private
+     */
+     SortableList.prototype.resetDraggedClasses = function() {
+        var classes = [
+            CSS.isDraggedClass,
+            CSS.currentPositionClass,
+            CSS.overElementClass,
+            CSS.targetListClass,
+        ];
+        for (var i in classes) {
+            $('.' + classes[i]).removeClass(classes[i]);
+        }
+        if (this.proxy) {
+            this.proxy.remove();
+            this.proxy = $();
+        }
+    };
+
+    /**
+     * Calculates evt.pageX, evt.pageY, evt.clientX and evt.clientY
+     *
+     * For touch events pageX and pageY are taken from the first touch;
+     * For the emulated mousemove event they are taken from the last real event.
+     *
+     * @private
+     * @param {Event} evt
+     */
+    SortableList.prototype.calculatePositionOnPage = function(evt) {
+
+        if (evt.originalEvent && evt.originalEvent.touches && evt.originalEvent.touches[0] !== undefined) {
+            // This is a touchmove or touchstart event, get position from the first touch position.
+            var touch = evt.originalEvent.touches[0];
+            evt.pageX = touch.pageX;
+            evt.pageY = touch.pageY;
+        }
+
+        if (evt.pageX === undefined) {
+            // Information is not present in case of touchend or when event was emulated by autoScroll.
+            // Take the absolute mouse position from the last event.
+            evt.pageX = this.lastEvent.pageX;
+            evt.pageY = this.lastEvent.pageY;
+        } else {
+            this.lastEvent = evt;
+        }
+
+        if (evt.clientX === undefined) {
+            // If not provided in event calculate relative mouse position.
+            evt.clientX = Math.round(evt.pageX - $(window).scrollLeft());
+            evt.clientY = Math.round(evt.pageY - $(window).scrollTop());
+        }
+    };
+
+    /**
+     * Handler from dragstart event
+     *
+     * @private
+     * @param {Event} evt
+     */
+    SortableList.prototype.dragStartHandler = function(evt) {
+        if (this.info !== null) {
+            if (this.info.type === 'click') {
+                // Ignore double click.
+                return;
+            }
+            // Mouse down or touch while already dragging, cancel previous dragging.
+            this.moveElement(this.info.sourceList, this.info.sourceNextElement);
+            this.finishDragging();
+        }
+
+        if (evt.type === 'mousedown' && evt.which !== 1) {
+            // We only need left mouse click. If this is a mousedown event with right/middle click ignore it.
+            return;
+        }
+
+        this.calculatePositionOnPage(evt);
+        var movedElement = $(evt.target).closest($(evt.currentTarget).children());
+        if (!movedElement.length) {
+            // Can't find the element user wants to drag. They clicked on the list but outside of any element of the list.
+            return;
+        }
+
+        // Check that we grabbed the element by the handle.
+        if (this.config.moveHandlerSelector !== null) {
+            if (!$(evt.target).closest(this.config.moveHandlerSelector, movedElement).length) {
+                return;
+            }
+        }
+
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        // Information about moved element with original location.
+        // This object is passed to event observers.
+        this.dragCounter++;
+        this.info = {
+            element: movedElement,
+            sourceNextElement: movedElement.next(),
+            sourceList: movedElement.parent(),
+            targetNextElement: movedElement.next(),
+            targetList: movedElement.parent(),
+            type: evt.type,
+            dropped: false,
+            startX: evt.pageX,
+            startY: evt.pageY,
+            startTime: new Date().getTime()
+        };
+
+        $(this.config.targetListSelector).addClass(CSS.targetListClass);
+
+        var offset = movedElement.offset();
+        movedElement.addClass(CSS.currentPositionClass);
+        this.proxyDelta = {x: offset.left - evt.pageX, y: offset.top - evt.pageY};
+        this.proxy = $();
+        var thisDragCounter = this.dragCounter;
+        setTimeout($.proxy(function() {
+            // This mousedown event may in fact be a beginning of a 'click' event. Use timeout before showing the
+            // dragged object so we can catch click event. When timeout finishes make sure that click event
+            // has not happened during this half a second.
+            // Verify dragcounter to make sure the user did not manage to do two very fast drag actions one after another.
+            if (this.info === null || this.info.type === 'click' || this.info.type === 'keypress'
+                    || this.dragCounter !== thisDragCounter) {
+                return;
+            }
+
+            // Create a proxy - the copy of the dragged element that moves together with a mouse.
+            this.createProxy();
+        }, this), 500);
+
+        // Start drag.
+        $(window).on('mousemove touchmove mouseup touchend', $.proxy(this.dragHandler, this));
+        $(window).on('keypress', $.proxy(this.dragcancelHandler, this));
+
+        // Start autoscrolling. Every time the page is scrolled emulate the mousemove event.
+        if (this.config.autoScroll) {
+            autoScroll.start(function() {
+                $(window).trigger('mousemove');
+            });
+        }
+
+       this.executeCallback(SortableList.EVENTS.DRAGSTART);
+    };
+
+    /**
+     * Creates a "proxy" object - a copy of the element that is being moved that always follows the mouse
+     * @private
+     */
+    SortableList.prototype.createProxy = function() {
+        this.proxy = this.info.element.clone();
+        this.info.sourceList.append(this.proxy);
+        this.proxy.removeAttr('id').removeClass(CSS.currentPositionClass)
+            .addClass(CSS.isDraggedClass).css({position: 'fixed'});
+        this.proxy.offset({top: this.proxyDelta.y + this.lastEvent.pageY, left: this.proxyDelta.x + this.lastEvent.pageX});
+    };
+
+    /**
+     * Handler for click event - when user clicks on the drag handler or presses Enter on keyboard
+     *
+     * @private
+     * @param {Event} evt
+     */
+    SortableList.prototype.clickHandler = function(evt) {
+        if (evt.type === 'keypress' && evt.originalEvent.keyCode !== 13 && evt.originalEvent.keyCode !== 32) {
+            return;
+        }
+        if (this.info !== null && this.info.type === 'click') {
+            // Ignore double click.
+            return;
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        // Find the element that this draghandle belongs to.
+        var clickedElement = $(evt.currentTarget),
+            sourceList = clickedElement.closest(this.config.listSelector),
+            movedElement = clickedElement.closest(sourceList.children());
+        if (!movedElement.length) {
+            return;
+        }
+
+        // Store information about moved element with original location.
+        this.dragCounter++;
+        this.info = {
+            element: movedElement,
+            sourceNextElement: movedElement.next(),
+            sourceList: sourceList,
+            targetNextElement: movedElement.next(),
+            targetList: sourceList,
+            dropped: false,
+            type: evt.type,
+            startTime: new Date().getTime()
+        };
+
+        this.executeCallback(SortableList.EVENTS.DRAGSTART);
+        this.displayMoveDialogue(clickedElement);
+    };
+
+    /**
+     * Finds the position of the mouse inside the element - on the top, on the bottom, on the right or on the left\
+     *
+     * Used to determine if the moved element should be moved after or before the current element
+     *
+     * @private
+     * @param {Number} pageX
+     * @param {Number} pageY
+     * @param {jQuery} element
+     * @returns {(Object|null)}
+     */
+    SortableList.prototype.getPositionInNode = function(pageX, pageY, element) {
+        if (!element.length) {
+            return null;
+        }
+        var node = element[0],
+            offset = 0,
+            rect = node.getBoundingClientRect(),
+            y = pageY - (rect.top + window.scrollY),
+            x = pageX - (rect.left + window.scrollX);
+        if (x >= -offset && x <= rect.width + offset && y >= -offset && y <= rect.height + offset) {
+            return {
+                x: x,
+                y: y,
+                xRatio: rect.width ? (x / rect.width) : 0,
+                yRatio: rect.height ? (y / rect.height) : 0
+            };
+        }
+        return null;
+    };
+
+    /**
+     * Check if list is horizontal
+     *
+     * @param {jQuery} element
+     * @return {Boolean}
+     */
+    SortableList.prototype.isListHorizontal = function(element) {
+        var isHorizontal = this.config.isHorizontal;
+        if (isHorizontal === true || isHorizontal === false) {
+            return isHorizontal;
+        }
+        return isHorizontal(element);
+    };
+
+    /**
+     * Handler for events mousemove touchmove mouseup touchend
+     *
+     * @private
+     * @param {Event} evt
+     */
+    SortableList.prototype.dragHandler = function(evt) {
+
+        this.calculatePositionOnPage(evt);
+
+        // We can not use evt.target here because it will most likely be our proxy.
+        // Move the proxy out of the way so we can find the element at the current mouse position.
+        this.proxy.offset({top: -1000, left: -1000});
+        // Find the element at the current mouse position.
+        var element = $(document.elementFromPoint(evt.clientX, evt.clientY));
+
+        // Find the list element and the list over the mouse position.
+        var current = element.closest('.' + CSS.targetListClass + ' > :not(.' + CSS.isDraggedClass + ')'),
+            currentList = element.closest('.' + CSS.targetListClass),
+            proxy = this.proxy,
+            isNotProxy = function() {
+                return !proxy || !proxy.length || this !== proxy[0];
+            };
+
+        // Add the specified class to the list element we are hovering.
+        $('.' + CSS.overElementClass).removeClass(CSS.overElementClass);
+        current.addClass(CSS.overElementClass);
+
+        // Move proxy to the current position.
+        this.proxy.offset({top: this.proxyDelta.y + evt.pageY, left: this.proxyDelta.x + evt.pageX});
+
+        if (currentList.length && !currentList.children().filter(isNotProxy).length) {
+            // Mouse is over an empty list.
+            this.moveElement(currentList, $());
+        } else if (current.length === 1 && !this.info.element.find(current[0]).length) {
+            // Mouse is over an element in a list - find whether we should move the current position
+            // above or below this element.
+            var coordinates = this.getPositionInNode(evt.pageX, evt.pageY, current);
+            if (coordinates) {
+                var parent = current.parent(),
+                    ratio = this.isListHorizontal(parent) ? coordinates.xRatio : coordinates.yRatio,
+                    subList = current.find('.' + CSS.targetListClass),
+                    currentElement = this.info.element[0],
+                    isNotCurrent = function() {
+                        return this !== currentElement;
+                    },
+                    subListEmpty = !subList.children().filter(isNotProxy).filter(isNotCurrent).length;
+                if (subList.length && subListEmpty && ratio > 0.2 && ratio < 0.8) {
+                    // This is an element that is a parent of an empty list and we are around the middle of this element.
+                    // Treat it as if we are over this empty list.
+                   this.moveElement(subList, $());
+                } else if (ratio > 0.5) {
+                    // Insert after this element.
+                   this.moveElement(parent, current.next().filter(isNotProxy));
+                } else {
+                    // Insert before this element.
+                   this.moveElement(parent, current);
+                }
+            }
+        }
+
+        if (evt.type === 'mouseup' || evt.type === 'touchend') {
+            // Drop the moved element.
+            this.info.endX = evt.pageX;
+            this.info.endY = evt.pageY;
+            this.info.endTime = new Date().getTime();
+            this.info.dropped = true;
+            this.executeCallback(SortableList.EVENTS.DROP);
+            this.finishDragging();
+        }
+    };
+
+    /**
+     * Moves the current position of the dragged element
+     *
+     * @private
+     * @param {jQuery} parentElement
+     * @param {jQuery} beforeElement
+     */
+    SortableList.prototype.moveElement = function(parentElement, beforeElement) {
+        var dragEl = this.info.element;
+        if (beforeElement.length && beforeElement[0] === dragEl[0]) {
+            // Insert before the current position of the dragged element - nothing to do.
+            return;
+        }
+        if (parentElement[0] === this.info.targetList[0] &&
+                beforeElement.length === this.info.targetNextElement.length &&
+                beforeElement[0] === this.info.targetNextElement[0]) {
+            // Insert in the same location as the current position - nothing to do.
+            return;
+        }
+
+        if (beforeElement.length) {
+            // Move the dragged element before the specified element.
+            parentElement[0].insertBefore(dragEl[0], beforeElement[0]);
+        } else if (this.proxy && this.proxy.parent().length && this.proxy.parent()[0] === parentElement[0]) {
+            // We need to move to the end of the list but the last element in this list is a proxy.
+            // Always leave the proxy in the end of the list.
+            parentElement[0].insertBefore(dragEl[0], this.proxy[0]);
+        } else {
+            // Insert in the end of a list (when proxy is in another list).
+            parentElement[0].appendChild(dragEl[0]);
+        }
+
+        // Save the current position of the dragged element in the list.
+        this.info.targetList = parentElement;
+        this.info.targetNextElement = beforeElement;
+        this.executeCallback(SortableList.EVENTS.DRAG);
+    };
+
+    /**
+     * Finish dragging (when dropped or cancelled).
+     * @private
+     */
+    SortableList.prototype.finishDragging = function() {
+        this.resetDraggedClasses();
+        if (this.config.autoScroll) {
+            autoScroll.stop();
+        }
+        $(window).off('mousemove touchmove mouseup touchend', $.proxy(this.dragHandler, this));
+        $(window).off('keypress', $.proxy(this.dragcancelHandler, this));
+        this.executeCallback(SortableList.EVENTS.DRAGEND);
+        this.info = null;
+    };
+
+    /**
+     * Executes callback specified in sortable list parameters
+     *
+     * @private
+     * @param {String} eventName
+     */
+    SortableList.prototype.executeCallback = function(eventName) {
+        this.info.element.trigger(eventName, this.info);
+    };
+
+    /**
+     * Handler from keypress event (cancel dragging when Esc is pressed)
+     *
+     * @private
+     * @param {Event} evt
+     */
+    SortableList.prototype.dragcancelHandler = function(evt) {
+        if (evt.type !== 'keypress' || evt.originalEvent.keyCode !== 27) {
+            // Only cancel dragging when Esc was pressed.
+            return;
+        }
+        // Dragging was cancelled. Return item to the original position.
+        this.moveElement(this.info.sourceList, this.info.sourceNextElement);
+        this.finishDragging();
+    };
+
+    /**
+     * Returns the name of the current element to be used in the move dialogue
+     *
+     * @public
+     * @param {jQuery} element
+     * @return {Promise}
+     */
+    SortableList.prototype.getElementName = function(element) {
+        return $.Deferred().resolve(element.text());
+    };
+
+    /**
+     * Returns the label for the potential move destination, i.e. "After ElementX" or "To the top of the list"
+     *
+     * Note that we use "after" in the label for better UX
+     *
+     * @public
+     * @param {jQuery} parentElement
+     * @param {jQuery} afterElement
+     * @return {Promise}
+     */
+    SortableList.prototype.getDestinationName = function(parentElement, afterElement) {
+        if (!afterElement.length) {
+            return str.get_string('movecontenttothetop', 'moodle');
+        } else {
+            return this.getElementName(afterElement)
+                .then(function(name) {
+                    return str.get_string('movecontentafter', 'moodle', name);
+                });
+        }
+    };
+
+    /**
+     * Returns the title for the move dialogue ("Move elementY")
+     *
+     * @public
+     * @param {jQuery} element
+     * @return {Promise}
+     */
+    SortableList.prototype.getMoveDialogueTitle = function(element) {
+        return this.getElementName(element).then(function(name) {
+            return str.get_string('movecontent', 'moodle', name);
+        });
+    };
+
+    /**
+     * Returns the list of possible move destinations
+     *
+     * @private
+     * @return {Promise}
+     */
+    SortableList.prototype.getDestinationsList = function() {
+        var addedLists = [],
+            targets = $(this.config.targetListSelector),
+            destinations = $('<ul/>').addClass(CSS.keyboardDragClass),
+            result = $.when().then(function() {
+                return destinations;
+            }),
+            createLink = $.proxy(function(parentElement, beforeElement, afterElement) {
+                if (beforeElement.is(this.info.element) || afterElement.is(this.info.element)) {
+                    // Can not move before or after itself.
+                    return;
+                }
+                if ($.contains(this.info.element[0], parentElement[0])) {
+                    // Can not move to its own child.
+                    return;
+                }
+                result = result
+                .then($.proxy(function() {
+                    return this.getDestinationName(parentElement, afterElement);
+                }, this))
+                .then(function(txt) {
+                    var li = $('<li/>').appendTo(destinations);
+                    var a = $('<a href="#"/>').attr('data-core_sortable_list-quickmove', 1).appendTo(li);
+                    a.data('parent-element', parentElement).data('before-element', beforeElement).text(txt);
+                    return destinations;
+                });
+            }, this),
+            addList = function() {
+                // Destination lists may be nested. We want to add all move destinations in the same
+                // order they appear on the screen for the user.
+                if ($.inArray(this, addedLists) !== -1) {
+                    return;
+                }
+                addedLists.push(this);
+                var list = $(this),
+                    children = list.children();
+                children.each(function() {
+                    var element = $(this);
+                    createLink(list, element, element.prev());
+                    // Add all nested lists.
+                    element.find(targets).each(addList);
+                });
+                createLink(list, $(), children.last());
+            };
+        targets.each(addList);
+        return result;
+    };
+
+    /**
+     * Displays the dialogue to move element.
+     * @param {jQuery} clickedElement element to return focus to after the modal is closed
+     * @private
+     */
+    SortableList.prototype.displayMoveDialogue = function(clickedElement) {
+        ModalFactory.create({
+            type: ModalFactory.types.CANCEL,
+            title: this.getMoveDialogueTitle(this.info.element),
+            body: this.getDestinationsList()
+        }).then($.proxy(function(modal) {
+            var quickMoveHandler = $.proxy(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.moveElement($(e.currentTarget).data('parent-element'), $(e.currentTarget).data('before-element'));
+                this.info.endTime = new Date().getTime();
+                this.info.dropped = true;
+                clickedElement.focus();
+                this.executeCallback(SortableList.EVENTS.DROP);
+                modal.hide();
+            }, this);
+            modal.getRoot().on('click', '[data-core_sortable_list-quickmove]', quickMoveHandler);
+            modal.getRoot().on(ModalEvents.hidden, $.proxy(function() {
+                // Always destroy when hidden, it is generated dynamically each time.
+                modal.getRoot().off('click', '[data-core_sortable_list-quickmove]', quickMoveHandler);
+                modal.destroy();
+                this.finishDragging();
+            }, this));
+            modal.setLarge();
+            modal.show();
+            return modal;
+        }, this)).catch(Notification.exception);
+    };
+
+    return SortableList;
+
+});