jQuery UI Sortable deprecated and core usages removed

Introduction

JQuery UI Sortable was deprecated due to jQuery UI no longer being supported. The OpenJS Foundation lists jQuery UI as an Emeritus project in https://openjsf.org/projects/ which is described as:

Emeritus projects are those which the maintainers feel have reached or are nearing end-of-life

The core/jquery.ui.sortable library is deprecated in Drupal 8.8 and is removed from Drupal 9.
Its use in Drupal core in ckeditor, layout_builder and media_library are replaced with Sortable. This improves the user experience of dragging and dropping in those modules, in addition to making the code future-compatible with ongoing security coverage.

This change also removes the only use in Drupal core of core/jquery.ui.touch-punch, which is also now marked as deprecated.

API Changes

The events and methods provided by jQuery UI Sortable are deprecated in Drupal 8.8.0. No backwards compatibility layer is provided in Drupal core between jQuery UI Sortable and the new Sortable library. However, Sortable has comparable events; for example the jQuery UI Sortable stop() is replaced with Sortable onEnd().

jQuery UI Sortable

$('#myList').on('sortstop', (event, ui) => {
  // code that runs after sort end
});

SortableJS

Sortable.utils.on(document.getElementById('myList'), 'onEnd', event => {
  // code that runs after sort end
});

An important change to note is although the arguments look similar, the event object is different from jQuery to Sortable.
In jQuery UI Sortable the jQuery element being dragged is located at ui.item
While in SortableJS it is an HTMLElement located at event.item.

When refactoring your code please reference the Sortable documentation and the jQuery UI Sortable API doc to find the equivalent methods or data you need.

Affected user interfaces

The following UIs are no longer using jQuery UI Sortable:

• CKEditor toolbar configuration UI
• Layout Builder (arranging blocks)
• Media Library field widget

Modules extending the above core modules may require small changes, although the changes are mostly to these modules' internal JavaScript.

Changes to testing

Sortable uses HTML5 Drag and Drop which is currently not supported by Chromedriver, due to a bug in the Chrome debug protocol in Chromium.

See:

• https://bugs.chromium.org/p/chromium/issues/detail?id=850071
• https://bugs.chromium.org/p/chromedriver/issues/detail?id=2695

This means the dragTo() method from Selenium tests will have no effect. To work around this, there is now a SortableTestTrait which can be extended to allow for functional javascript tests using Sortable until the Chromedriver bug is resolved.

Changes for modules and themes

Modules and themes that depended on the jquery_ui.sortable library should be updated to use Sortable. A jQuery UI Sortable contributed project has also been provided, and modules or themes can declare a dependency on that module as an interim step when upgrading to Drupal 9.

Contrib projects

Paragraphs contributed project uses Sortable for its experimental widget. This could lead into version conflicts when both, Paragraphs experimental widget and Media Library are used on the same page.