Merge branch 'MDL-72293' of https://github.com/paulholden/moodle

.upgradenotes/MDL-72293-2024101014161659.yml

@@ -0,0 +1,9 @@
+issueNumber: MDL-72293
+notes:
+  core:
+    - message: >-
+        The `core/sortable_list` Javascript module now emits native events,
+        removing the jQuery dependency from calling code that wants to listen
+        for the events. Backwards compatibility with existing code using jQuery
+        is preserved
+      type: improved

lib/amd/src/sortable_list.js

@@ -56,8 +56,16 @@
  * @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_cancel', 'core/modal_events', 'core/notification'],
-function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
+define([
+    'jquery',
+    'core/log',
+    'core/autoscroll',
+    'core/event_dispatcher',
+    'core/str',
+    'core/modal_cancel',
+    'core/modal_events',
+    'core/notification',
+], function($, log, autoScroll, EventDispatcher, str, ModalCancel, ModalEvents, Notification) {
 
     /**
      * Default parameters
@@ -191,10 +199,16 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
      * @type {Object}
      */
     SortableList.EVENTS = {
+        // Legacy jQuery events.
         DRAGSTART: 'sortablelist-dragstart',
         DRAG: 'sortablelist-drag',
         DROP: 'sortablelist-drop',
-        DRAGEND: 'sortablelist-dragend'
+        DRAGEND: 'sortablelist-dragend',
+        // Native Javascript events.
+        elementDragStart: 'core/sortable_list:dragStart',
+        elementDrag: 'core/sortable_list:drag',
+        elementDrop: 'core/sortable_list:drop',
+        elementDragEnd: 'core/sortable_list:dragEnd',
     };
 
     /**
@@ -338,7 +352,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
             });
         }
 
-       this.executeCallback(SortableList.EVENTS.DRAGSTART);
+       this.executeCallback(SortableList.EVENTS.elementDragStart);
     };
 
     /**
@@ -392,7 +406,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
             startTime: new Date().getTime()
         };
 
-        this.executeCallback(SortableList.EVENTS.DRAGSTART);
+        this.executeCallback(SortableList.EVENTS.elementDragStart);
         this.displayMoveDialogue(clickedElement);
     };
 
@@ -513,7 +527,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
             this.info.dropped = true;
             this.info.positionChanged = this.hasPositionChanged(this.info);
             var oldinfo = this.info;
-            this.executeCallback(SortableList.EVENTS.DROP);
+            this.executeCallback(SortableList.EVENTS.elementDrop);
             this.finishDragging();
 
             if (evt.type === 'touchend'
@@ -577,7 +591,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
         // Save the current position of the dragged element in the list.
         this.info.targetList = parentElement;
         this.info.targetNextElement = beforeElement;
-        this.executeCallback(SortableList.EVENTS.DRAG);
+        this.executeCallback(SortableList.EVENTS.elementDrag);
     };
 
     /**
@@ -591,7 +605,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
         }
         $(window).off('mousemove touchmove.notPassive mouseup touchend.notPassive', $.proxy(this.dragHandler, this));
         $(window).off('keypress', $.proxy(this.dragcancelHandler, this));
-        this.executeCallback(SortableList.EVENTS.DRAGEND);
+        this.executeCallback(SortableList.EVENTS.elementDragEnd);
         this.info = null;
     };
 
@@ -602,7 +616,18 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
      * @param {String} eventName
      */
     SortableList.prototype.executeCallback = function(eventName) {
-        this.info.element.trigger(eventName, this.info);
+        EventDispatcher.dispatchEvent(eventName, this.info, this.info.element[0]);
+
+        // The following event trigger is legacy and will be removed in the future.
+        // This approach provides a backwards-compatibility layer for the new events.
+        // Code should be updated to make use of native events.
+        const legacyEventNamesMap = new Map([
+            [SortableList.EVENTS.elementDragStart, SortableList.EVENTS.DRAGSTART],
+            [SortableList.EVENTS.elementDrag, SortableList.EVENTS.DRAG],
+            [SortableList.EVENTS.elementDrop, SortableList.EVENTS.DROP],
+            [SortableList.EVENTS.elementDragEnd, SortableList.EVENTS.DRAGEND],
+        ]);
+        this.info.element.trigger(legacyEventNamesMap.get(eventName), this.info);
     };
 
     /**
@@ -742,7 +767,7 @@ function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {
                 this.info.positionChanged = this.hasPositionChanged(this.info);
                 this.info.dropped = true;
                 clickedElement.focus();
-                this.executeCallback(SortableList.EVENTS.DROP);
+                this.executeCallback(SortableList.EVENTS.elementDrop);
                 modal.hide();
             }, this);
             modal.getRoot().on('click', '[data-core_sortable_list-quickmove]', quickMoveHandler);

reportbuilder/amd/build/local/selectors.min.js

@@ -6,6 +6,6 @@ define("core_reportbuilder/local/selectors",["exports"],(function(_exports){Obje
    * @copyright   2021 Paul Holden <paulh@moodle.com>
    * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
    */
-const SELECTORS={regions:{report:'[data-region="core_reportbuilder/report"]',reportTable:'[data-region="reportbuilder-table"]',columnHeader:'[data-region="column-header"]',filterButtonLabel:'[data-region="filter-button-label"]',filtersForm:'[data-region="filters-form"]',sidebarMenu:'[data-region="sidebar-menu"]',sidebarCard:'[data-region="sidebar-card"]',sidebarItem:'[data-region="sidebar-item"]',settingsConditions:'[data-region="settings-conditions"]',activeConditions:'[data-region="active-conditions"]',activeCondition:'[data-region="active-condition"]',settingsFilters:'[data-region="settings-filters"]',activeFilters:'[data-region="active-filters"]',activeFilter:'[data-region="active-filter"]',settingsSorting:'[data-region="settings-sorting"]',audiencesContainer:'[data-region="audiences"]',audienceFormContainer:'[data-region="audience-form-container"]',audienceCard:'[data-region="audience-card"]',audienceHeading:'[data-region="audience-heading"]',audienceForm:'[data-region="audience-form"]',audienceEmptyMessage:"[data-region=no-instances-message]",audienceDescription:"[data-region=audience-description]",audienceNotSavedLabel:"[data-region=audience-not-saved]",settingsCardView:'[data-region="settings-cardview"]'},actions:{reportActionPopup:'[data-action="report-action-popup"]',reportCreate:'[data-action="report-create"]',reportEdit:'[data-action="report-edit"]',reportDelete:'[data-action="report-delete"]',reportDuplicate:'[data-action="report-duplicate"]',reportAddColumn:'[data-action="report-add-column"]',reportRemoveColumn:'[data-action="report-remove-column"]',reportAddCondition:'[data-action="report-add-condition"]',reportRemoveCondition:'[data-action="report-remove-condition"]',reportAddFilter:'[data-action="report-add-filter"]',reportRemoveFilter:'[data-action="report-remove-filter"]',reportToggleColumnSort:'[data-action="report-toggle-column-sorting"]',reportToggleColumnSortDirection:'[data-action="report-toggle-sort-direction"]',sidebarSearch:'[data-action="sidebar-search"]',toggleEditPreview:'[data-action="toggle-edit-preview"]',audienceAdd:'[data-action="add-audience"]',audienceEdit:'[data-action="edit-audience"]',audienceDelete:'[data-action="delete-audience"]',toggleCardView:'[data-action="toggle-card"]',scheduleCreate:'[data-action="schedule-create"]',scheduleToggle:'[data-action="schedule-toggle"]',scheduleEdit:'[data-action="schedule-edit"]',scheduleSend:'[data-action="schedule-send"]',scheduleDelete:'[data-action="schedule-delete"]'},forReport:reportId=>"".concat(SELECTORS.regions.report,'[data-report-id="').concat(reportId,'"]')};var _default=SELECTORS;return _exports.default=_default,_exports.default}));
+const SELECTORS={regions:{report:'[data-region="core_reportbuilder/report"]',reportTable:'[data-region="reportbuilder-table"]',columnHeader:'[data-region="column-header"]',filterButtonLabel:'[data-region="filter-button-label"]',filtersForm:'[data-region="filters-form"]',sidebarMenu:'[data-region="sidebar-menu"]',sidebarCard:'[data-region="sidebar-card"]',sidebarItem:'[data-region="sidebar-item"]',settingsConditions:'[data-region="settings-conditions"]',activeConditions:'[data-region="active-conditions"]',activeCondition:'[data-region="active-condition"]',settingsFilters:'[data-region="settings-filters"]',activeFilters:'[data-region="active-filters"]',activeFilter:'[data-region="active-filter"]',settingsSorting:'[data-region="settings-sorting"]',activeColumnSort:'[data-region="active-column-sort"]',audiencesContainer:'[data-region="audiences"]',audienceFormContainer:'[data-region="audience-form-container"]',audienceCard:'[data-region="audience-card"]',audienceHeading:'[data-region="audience-heading"]',audienceForm:'[data-region="audience-form"]',audienceEmptyMessage:"[data-region=no-instances-message]",audienceDescription:"[data-region=audience-description]",audienceNotSavedLabel:"[data-region=audience-not-saved]",settingsCardView:'[data-region="settings-cardview"]'},actions:{reportActionPopup:'[data-action="report-action-popup"]',reportCreate:'[data-action="report-create"]',reportEdit:'[data-action="report-edit"]',reportDelete:'[data-action="report-delete"]',reportDuplicate:'[data-action="report-duplicate"]',reportAddColumn:'[data-action="report-add-column"]',reportRemoveColumn:'[data-action="report-remove-column"]',reportAddCondition:'[data-action="report-add-condition"]',reportRemoveCondition:'[data-action="report-remove-condition"]',reportAddFilter:'[data-action="report-add-filter"]',reportRemoveFilter:'[data-action="report-remove-filter"]',reportToggleColumnSort:'[data-action="report-toggle-column-sorting"]',reportToggleColumnSortDirection:'[data-action="report-toggle-sort-direction"]',sidebarSearch:'[data-action="sidebar-search"]',toggleEditPreview:'[data-action="toggle-edit-preview"]',audienceAdd:'[data-action="add-audience"]',audienceEdit:'[data-action="edit-audience"]',audienceDelete:'[data-action="delete-audience"]',toggleCardView:'[data-action="toggle-card"]',scheduleCreate:'[data-action="schedule-create"]',scheduleToggle:'[data-action="schedule-toggle"]',scheduleEdit:'[data-action="schedule-edit"]',scheduleSend:'[data-action="schedule-send"]',scheduleDelete:'[data-action="schedule-delete"]'},forReport:reportId=>"".concat(SELECTORS.regions.report,'[data-report-id="').concat(reportId,'"]')};var _default=SELECTORS;return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=selectors.min.js.map

reportbuilder/amd/src/local/editor/columns.js

@@ -23,7 +23,6 @@
 
 "use strict";
 
-import $ from 'jquery';
 import {dispatchEvent} from 'core/event_dispatcher';
 import 'core/inplace_editable';
 import {eventTypes as inplaceEditableEvents} from 'core/local/inplace_editable/events';
@@ -114,36 +113,44 @@ export const init = initialized => {
         }
     });
 
-    // Initialize sortable list to handle column moving (note JQuery dependency, see MDL-72293 for resolution).
-    var columnSortableList = new SortableList(`${reportSelectors.regions.reportTable} thead tr`, {isHorizontal: true});
-    columnSortableList.getElementName = element => Promise.resolve(element.data('columnName'));
+    // Initialize sortable list to handle column moving.
+    const columnHeadingSelector = `${reportSelectors.regions.reportTable} thead tr`;
+    const columnHeadingSortableList = new SortableList(columnHeadingSelector, {isHorizontal: true});
+    columnHeadingSortableList.getElementName = element => Promise.resolve(element.data('columnName'));
 
-    $(document).on(SortableList.EVENTS.DRAG, `${reportSelectors.regions.report} th[data-column-id]`, (event, info) => {
-        const reportElement = event.target.closest(reportSelectors.regions.report);
-        const columnPosition = info.element.data('columnPosition');
-        const targetColumnPosition = info.targetNextElement.data('columnPosition');
+    document.addEventListener(SortableList.EVENTS.elementDrag, event => {
+        const reportOrderColumn = event.target.closest(`${columnHeadingSelector} ${reportSelectors.regions.columnHeader}`);
+        if (reportOrderColumn) {
+            const reportElement = event.target.closest(reportSelectors.regions.report);
+            const {columnPosition} = reportOrderColumn.dataset;
 
-        $(reportElement).find('tbody tr').each(function() {
-            const cell = $(this).children(`td.c${columnPosition - 1}`)[0];
-            if (targetColumnPosition) {
-                var beforeCell = $(this).children(`td.c${targetColumnPosition - 1}`)[0];
-                this.insertBefore(cell, beforeCell);
-            } else {
-                this.appendChild(cell);
-            }
-        });
+            // Select target position, shift table columns to match.
+            const targetColumnPosition = event.detail.targetNextElement.data('columnPosition');
+
+            const reportTableRows = reportElement.querySelectorAll(`${reportSelectors.regions.reportTable} tbody tr`);
+            reportTableRows.forEach(reportTableRow => {
+                const reportTableRowCell = reportTableRow.querySelector(`td.c${columnPosition - 1}`);
+                if (targetColumnPosition) {
+                    const reportTableRowCellTarget = reportTableRow.querySelector(`td.c${targetColumnPosition - 1}`);
+                    reportTableRow.insertBefore(reportTableRowCell, reportTableRowCellTarget);
+                } else {
+                    reportTableRow.appendChild(reportTableRowCell);
+                }
+            });
+        }
     });
 
-    $(document).on(SortableList.EVENTS.DROP, `${reportSelectors.regions.report} th[data-column-id]`, (event, info) => {
-        if (info.positionChanged) {
+    document.addEventListener(SortableList.EVENTS.elementDrop, event => {
+        const reportOrderColumn = event.target.closest(`${columnHeadingSelector} ${reportSelectors.regions.columnHeader}`);
+        if (reportOrderColumn && event.detail.positionChanged) {
             const pendingPromise = new Pending('core_reportbuilder/columns:reorder');
-            const reportElement = event.target.closest(reportSelectors.regions.report);
-            const columnId = info.element.data('columnId');
-            const columnName = info.element.data('columnName');
-            const columnPosition = info.element.data('columnPosition');
+
+            const reportElement = reportOrderColumn.closest(reportSelectors.regions.report);
+            const {columnId, columnPosition, columnName} = reportOrderColumn.dataset;
 
             // Select target position, if moving to the end then count number of element siblings.
-            let targetColumnPosition = info.targetNextElement.data('columnPosition') || info.element.siblings().length + 2;
+            let targetColumnPosition = event.detail.targetNextElement.data('columnPosition')
+                || event.detail.element.siblings().length + 2;
             if (targetColumnPosition > columnPosition) {
                 targetColumnPosition--;
             }
@@ -163,7 +170,6 @@ export const init = initialized => {
 
     // Initialize inplace editable listeners for column aggregation.
     document.addEventListener(inplaceEditableEvents.elementUpdated, event => {
-
         const columnAggregation = event.target.closest('[data-itemtype="columnaggregation"]');
         if (columnAggregation) {
             const pendingPromise = new Pending('core_reportbuilder/columns:aggregate');

reportbuilder/amd/src/local/editor/conditions.js

@@ -210,20 +210,22 @@ export const init = initialized => {
         }
     });
 
-    // Initialize sortable list to handle active conditions moving (note JQuery dependency, see MDL-72293 for resolution).
-    var activeConditionsSortableList = new SortableList(`${reportSelectors.regions.activeConditions}`,
-        {isHorizontal: false});
+    // Initialize sortable list to handle active conditions moving.
+    const activeConditionsSelector = reportSelectors.regions.activeConditions;
+    const activeConditionsSortableList = new SortableList(activeConditionsSelector, {isHorizontal: false});
     activeConditionsSortableList.getElementName = element => Promise.resolve(element.data('conditionName'));
 
-    $(document).on(SortableList.EVENTS.DROP, reportSelectors.regions.activeCondition, (event, info) => {
-        if (info.positionChanged) {
+    document.addEventListener(SortableList.EVENTS.elementDrop, event => {
+        const reportOrderCondition = event.target.closest(`${activeConditionsSelector} ${reportSelectors.regions.activeCondition}`);
+        if (reportOrderCondition && event.detail.positionChanged) {
             const pendingPromise = new Pending('core_reportbuilder/conditions:reorder');
-            const reportElement = event.target.closest(reportSelectors.regions.report);
-            const conditionId = info.element.data('conditionId');
-            const conditionPosition = info.element.data('conditionPosition');
+
+            const reportElement = reportOrderCondition.closest(reportSelectors.regions.report);
+            const {conditionId, conditionPosition, conditionName} = reportOrderCondition.dataset;
 
             // Select target position, if moving to the end then count number of element siblings.
-            let targetConditionPosition = info.targetNextElement.data('conditionPosition') || info.element.siblings().length + 2;
+            let targetConditionPosition = event.detail.targetNextElement.data('conditionPosition')
+                || event.detail.element.siblings().length + 2;
             if (targetConditionPosition > conditionPosition) {
                 targetConditionPosition--;
             }
@@ -232,7 +234,7 @@ export const init = initialized => {
             const reorderPromise = reorderCondition(reportElement.dataset.reportId, conditionId, targetConditionPosition);
             Promise.all([reorderPromise, new Promise(resolve => setTimeout(resolve, 1000))])
                 .then(([data]) => reloadSettingsConditionsRegion(reportElement, data))
-                .then(() => getString('conditionmoved', 'core_reportbuilder', info.element.data('conditionName')))
+                .then(() => getString('conditionmoved', 'core_reportbuilder', conditionName))
                 .then(addToast)
                 .then(() => {
                     dispatchEvent(reportEvents.tableReload, {}, reportElement);

reportbuilder/amd/src/local/editor/filters.js

@@ -23,7 +23,6 @@
 
 "use strict";
 
-import $ from 'jquery';
 import AutoComplete from 'core/form-autocomplete';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
@@ -151,19 +150,22 @@ export const init = initialized => {
         }
     });
 
-    // Initialize sortable list to handle active filters moving (note JQuery dependency, see MDL-72293 for resolution).
-    var activeFiltersSortableList = new SortableList(`${reportSelectors.regions.activeFilters} ul`, {isHorizontal: false});
+    // Initialize sortable list to handle active filters moving.
+    const activeFiltersSelector = `${reportSelectors.regions.activeFilters} ul`;
+    const activeFiltersSortableList = new SortableList(activeFiltersSelector, {isHorizontal: false});
     activeFiltersSortableList.getElementName = element => Promise.resolve(element.data('filterName'));
 
-    $(document).on(SortableList.EVENTS.DROP, `${reportSelectors.regions.report} li[data-filter-id]`, (event, info) => {
-        if (info.positionChanged) {
+    document.addEventListener(SortableList.EVENTS.elementDrop, event => {
+        const reportOrderFilter = event.target.closest(`${activeFiltersSelector} ${reportSelectors.regions.activeFilter}`);
+        if (reportOrderFilter && event.detail.positionChanged) {
             const pendingPromise = new Pending('core_reportbuilder/filters:reorder');
-            const reportElement = event.target.closest(reportSelectors.regions.report);
-            const filterId = info.element.data('filterId');
-            const filterPosition = info.element.data('filterPosition');
+
+            const reportElement = reportOrderFilter.closest(reportSelectors.regions.report);
+            const {filterId, filterPosition, filterName} = reportOrderFilter.dataset;
 
             // Select target position, if moving to the end then count number of element siblings.
-            let targetFilterPosition = info.targetNextElement.data('filterPosition') || info.element.siblings().length + 2;
+            let targetFilterPosition = event.detail.targetNextElement.data('filterPosition')
+                || event.detail.element.siblings().length + 2;
             if (targetFilterPosition > filterPosition) {
                 targetFilterPosition--;
             }
@@ -172,7 +174,7 @@ export const init = initialized => {
             const reorderPromise = reorderFilter(reportElement.dataset.reportId, filterId, targetFilterPosition);
             Promise.all([reorderPromise, new Promise(resolve => setTimeout(resolve, 1000))])
                 .then(([data]) => reloadSettingsFiltersRegion(reportElement, data))
-                .then(() => getString('filtermoved', 'core_reportbuilder', info.element.data('filterName')))
+                .then(() => getString('filtermoved', 'core_reportbuilder', filterName))
                 .then(addToast)
                 .then(() => pendingPromise.resolve())
                 .catch(Notification.exception);

reportbuilder/amd/src/local/editor/sorting.js

@@ -23,7 +23,6 @@
 
 "use strict";
 
-import $ from 'jquery';
 import 'core/inplace_editable';
 import Notification from 'core/notification';
 import Pending from 'core/pending';
@@ -70,14 +69,12 @@ const reloadSettingsSortingRegion = context => {
  * @return {Promise}
  */
 const updateSorting = (reportElement, element, sortenabled, sortdirection) => {
-    const reportId = reportElement.dataset.reportId;
-    const listElement = element.closest('li');
-    const columnId = listElement.dataset.columnSortId;
-    const columnName = listElement.dataset.columnSortName;
+    const columnSortContainer = element.closest(reportSelectors.regions.activeColumnSort);
+    const {columnSortId, columnSortName} = columnSortContainer.dataset;
 
-    return toggleColumnSorting(reportId, columnId, sortenabled, sortdirection)
+    return toggleColumnSorting(reportElement.dataset.reportId, columnSortId, sortenabled, sortdirection)
         .then(reloadSettingsSortingRegion)
-        .then(() => getString('columnsortupdated', 'core_reportbuilder', columnName))
+        .then(() => getString('columnsortupdated', 'core_reportbuilder', columnSortName))
         .then(addToast)
         .then(() => {
             dispatchEvent(reportEvents.tableReload, {}, reportElement);
@@ -109,7 +106,8 @@ export const init = (initialized) => {
 
             const pendingPromise = new Pending('core_reportbuilder/sorting:toggle');
             const reportElement = toggleSorting.closest(reportSelectors.regions.report);
-            const sortdirection = parseInt(toggleSorting.closest('li').dataset.columnSortDirection);
+            const columnSortContainer = toggleSorting.closest(reportSelectors.regions.activeColumnSort);
+            const sortdirection = parseInt(columnSortContainer.dataset.columnSortDirection);
 
             updateSorting(reportElement, toggleSorting, toggleSorting.checked, sortdirection)
                 .then(() => {
@@ -128,10 +126,10 @@ export const init = (initialized) => {
 
             const pendingPromise = new Pending('core_reportbuilder/sorting:direction');
             const reportElement = toggleSortDirection.closest(reportSelectors.regions.report);
-            const listElement = toggleSortDirection.closest('li');
-            const toggleSorting = listElement.querySelector(reportSelectors.actions.reportToggleColumnSort);
+            const columnSortContainer = toggleSortDirection.closest(reportSelectors.regions.activeColumnSort);
+            const toggleSorting = columnSortContainer.querySelector(reportSelectors.actions.reportToggleColumnSort);
 
-            let sortdirection = parseInt(listElement.dataset.columnSortDirection);
+            let sortdirection = parseInt(columnSortContainer.dataset.columnSortDirection);
             if (sortdirection === SORTORDER.ASCENDING) {
                 sortdirection = SORTORDER.DESCENDING;
             } else if (sortdirection === SORTORDER.DESCENDING) {
@@ -149,28 +147,31 @@ export const init = (initialized) => {
         }
     });
 
-    // Initialize sortable list to handle column sorting moving (note JQuery dependency, see MDL-72293 for resolution).
-    var columnsSortingSortableList = new SortableList(`${reportSelectors.regions.settingsSorting} ul`, {isHorizontal: false});
+    // Initialize sortable list to handle column sorting moving.
+    const columnsSortingSelector = `${reportSelectors.regions.settingsSorting} ul`;
+    const columnsSortingSortableList = new SortableList(columnsSortingSelector, {isHorizontal: false});
     columnsSortingSortableList.getElementName = element => Promise.resolve(element.data('columnSortName'));
 
-    $(document).on(SortableList.EVENTS.DROP, `${reportSelectors.regions.report} li[data-column-sort-id]`, (event, info) => {
-        if (info.positionChanged) {
+    document.addEventListener(SortableList.EVENTS.elementDrop, event => {
+        const toggleSortOrder = event.target.closest(`${columnsSortingSelector} ${reportSelectors.regions.activeColumnSort}`);
+        if (toggleSortOrder && event.detail.positionChanged) {
             const pendingPromise = new Pending('core_reportbuilder/sorting:reorder');
-            const reportElement = event.target.closest(reportSelectors.regions.report);
-            const columnId = info.element.data('columnSortId');
-            const columnPosition = info.element.data('columnSortPosition');
+
+            const reportElement = toggleSortOrder.closest(reportSelectors.regions.report);
+            const {columnSortId, columnSortPosition, columnSortName} = toggleSortOrder.dataset;
 
             // Select target position, if moving to the end then count number of element siblings.
-            let targetColumnSortPosition = info.targetNextElement.data('columnSortPosition') || info.element.siblings().length + 2;
-            if (targetColumnSortPosition > columnPosition) {
+            let targetColumnSortPosition = event.detail.targetNextElement.data('columnSortPosition')
+                || event.detail.element.siblings().length + 2;
+            if (targetColumnSortPosition > columnSortPosition) {
                 targetColumnSortPosition--;
             }
 
             // Re-order column sorting, giving drop event transition time to finish.
-            const reorderPromise = reorderColumnSorting(reportElement.dataset.reportId, columnId, targetColumnSortPosition);
+            const reorderPromise = reorderColumnSorting(reportElement.dataset.reportId, columnSortId, targetColumnSortPosition);
             Promise.all([reorderPromise, new Promise(resolve => setTimeout(resolve, 1000))])
                 .then(([data]) => reloadSettingsSortingRegion(data))
-                .then(() => getString('columnsortupdated', 'core_reportbuilder', info.element.data('columnSortName')))
+                .then(() => getString('columnsortupdated', 'core_reportbuilder', columnSortName))
                 .then(addToast)
                 .then(() => {
                     dispatchEvent(reportEvents.tableReload, {}, reportElement);

reportbuilder/amd/src/local/selectors.js

@@ -46,6 +46,7 @@ const SELECTORS = {
         activeFilters: '[data-region="active-filters"]',
         activeFilter: '[data-region="active-filter"]',
         settingsSorting: '[data-region="settings-sorting"]',
+        activeColumnSort: '[data-region="active-column-sort"]',
         audiencesContainer: '[data-region="audiences"]',
         audienceFormContainer: '[data-region="audience-form-container"]',
         audienceCard: '[data-region="audience-card"]',

reportbuilder/templates/local/settings/sorting.mustache

@@ -48,6 +48,7 @@
             <ul class="list-group reportbuilder-sortable-list ms-0">
                 {{#sortablecolumns}}
                     <li class="list-group-item list-group-item-action d-flex align-items-center text-dark"
+                        data-region="active-column-sort"
                         data-column-sort-id="{{id}}"
                         data-column-sort-name="{{title}}"
                         data-column-sort-direction="{{sortdirection}}"