From 4fb98eb26962cebaebc348d285b6ee17ab704b7e Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 1 Nov 2019 02:21:14 +0200
Subject: [PATCH] Issue #3064049 by zrpnr, lauriii, bnjmnm, finnsky, alexpott,
 tedbow, phenaproxima, Wim Leers, xjm, Berdir, sasanikolic, justafish,
 larowlan: Replace jQuery UI sortable with Sortable js

---
 core/.eslintrc.json                           |   1 +
 core/assets/vendor/sortable/Sortable.min.js   |   2 +
 core/core.libraries.yml                       |  12 ++
 core/modules/ckeditor/ckeditor.libraries.yml  |   4 +-
 core/modules/ckeditor/css/ckeditor.admin.css  |   1 +
 .../ckeditor/js/views/KeyboardView.es6.js     |   5 -
 .../modules/ckeditor/js/views/KeyboardView.js |   4 +-
 .../ckeditor/js/views/VisualView.es6.js       | 135 ++++++++----------
 core/modules/ckeditor/js/views/VisualView.js  |  75 +++++-----
 .../src/Traits/CKEditorAdminSortTrait.php     |  34 +++++
 .../layout_builder/css/layout-builder.css     |   1 +
 .../layout_builder/js/layout-builder.es6.js   | 105 +++++++-------
 .../layout_builder/js/layout-builder.js       |  47 +++---
 .../layout_builder.libraries.yml              |   2 +-
 .../ContentPreviewToggleTest.php              |  12 +-
 .../LayoutBuilderSortTrait.php                |  41 ++++++
 .../LayoutBuilderTest.php                     |   4 +-
 .../js/media_library.widget.es6.js            |  19 ++-
 .../media_library/js/media_library.widget.js  |  26 ++--
 .../media_library/media_library.libraries.yml |   2 +-
 .../CKEditorIntegrationTest.php               |  11 +-
 .../SortableTestTrait.php                     |  96 +++++++++++++
 .../stable/css/ckeditor/ckeditor.admin.css    |   1 +
 .../css/layout_builder/layout-builder.css     |   1 +
 24 files changed, 420 insertions(+), 221 deletions(-)
 create mode 100644 core/assets/vendor/sortable/Sortable.min.js
 create mode 100644 core/modules/ckeditor/tests/src/Traits/CKEditorAdminSortTrait.php
 create mode 100644 core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderSortTrait.php
 create mode 100644 core/tests/Drupal/FunctionalJavascriptTests/SortableTestTrait.php

diff --git a/core/.eslintrc.json b/core/.eslintrc.json
index 9ecf723effa9..962bd84f2653 100644
--- a/core/.eslintrc.json
+++ b/core/.eslintrc.json
@@ -18,6 +18,7 @@
     "Backbone": true,
     "Modernizr": true,
     "Popper": true,
+    "Sortable": true,
     "CKEDITOR": true
   },
   "rules": {
diff --git a/core/assets/vendor/sortable/Sortable.min.js b/core/assets/vendor/sortable/Sortable.min.js
new file mode 100644
index 000000000000..693054f6255b
--- /dev/null
+++ b/core/assets/vendor/sortable/Sortable.min.js
@@ -0,0 +1,2 @@
+/*! Sortable 1.10.0 - MIT | git://github.com/SortableJS/Sortable.git */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function I(i){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),e.forEach(function(t){var e,n,o;e=i,o=r[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o})}return i}function l(t,e){if(null==t)return{};var n,o,i=function(t,e){if(null==t)return{};var n,o,i={},r=Object.keys(t);for(o=0;o<r.length;o++)n=r[o],0<=e.indexOf(n)||(i[n]=t[n]);return i}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(o=0;o<r.length;o++)n=r[o],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}function e(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function t(t){return!!navigator.userAgent.match(t)}var w=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),E=t(/Edge/i),c=t(/firefox/i),s=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),n=t(/iP(ad|od|hone)/i),i=t(/chrome/i)&&t(/android/i),r={capture:!1,passive:!1};function u(t,e,n){t.addEventListener(e,n,!w&&r)}function d(t,e,n){t.removeEventListener(e,n,!w&&r)}function h(t,e){if(e){if(">"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&h(t,e):h(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var f,p=/\s+/g;function k(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(p," ")}}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix;return i&&new i(n)}function g(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i<r;i++)n(o[i],i);return o}return[]}function N(){return w?document.documentElement:document.scrollingElement}function X(t,e,n,o,i){if(t.getBoundingClientRect||t===window){var r,a,l,s,c,u,d;if(d=t!==window&&t!==N()?(a=(r=t.getBoundingClientRect()).top,l=r.left,s=r.bottom,c=r.right,u=r.height,r.width):(l=a=0,s=window.innerHeight,c=window.innerWidth,u=window.innerHeight,window.innerWidth),(e||n)&&t!==window&&(i=i||t.parentNode,!w))do{if(i&&i.getBoundingClientRect&&("none"!==R(i,"transform")||n&&"static"!==R(i,"position"))){var h=i.getBoundingClientRect();a-=h.top+parseInt(R(i,"border-top-width")),l-=h.left+parseInt(R(i,"border-left-width")),s=a+r.height,c=l+r.width;break}}while(i=i.parentNode);if(o&&t!==window){var f=v(i||t),p=f&&f.a,g=f&&f.d;f&&(s=(a/=g)+(u/=g),c=(l/=p)+(d/=p))}return{top:a,left:l,bottom:s,right:c,width:d,height:u}}}function Y(t,e,n){for(var o=H(t,!0),i=X(t)[e];o;){var r=X(o)[n];if(!("top"===n||"left"===n?r<=i:i<=r))return o;if(o===N())break;o=H(o,!1)}return!1}function m(t,e,n){for(var o=0,i=0,r=t.children;i<r.length;){if("none"!==r[i].style.display&&r[i]!==kt.ghost&&r[i]!==kt.dragged&&P(r[i],n.draggable,t,!1)){if(o===e)return r[i];o++}i++}return null}function B(t,e){for(var n=t.lastElementChild;n&&(n===kt.ghost||"none"===R(n,"display")||e&&!h(n,e));)n=n.previousElementSibling;return n||null}function F(t,e){var n=0;if(!t||!t.parentNode)return-1;for(;t=t.previousElementSibling;)"TEMPLATE"===t.nodeName.toUpperCase()||t===kt.clone||e&&!h(t,e)||n++;return n}function b(t){var e=0,n=0,o=N();if(t)do{var i=v(t),r=i.a,a=i.d;e+=t.scrollLeft*r,n+=t.scrollTop*a}while(t!==o&&(t=t.parentNode));return[e,n]}function H(t,e){if(!t||!t.getBoundingClientRect)return N();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=R(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return N();if(o||e)return n;o=!0}}}while(n=n.parentNode);return N()}function y(t,e){return Math.round(t.top)===Math.round(e.top)&&Math.round(t.left)===Math.round(e.left)&&Math.round(t.height)===Math.round(e.height)&&Math.round(t.width)===Math.round(e.width)}function D(e,n){return function(){if(!f){var t=arguments;1===t.length?e.call(this,t[0]):e.apply(this,t),f=setTimeout(function(){f=void 0},n)}}}function L(t,e,n){t.scrollLeft+=e,t.scrollTop+=n}function S(t){var e=window.Polymer,n=window.jQuery||window.Zepto;return e&&e.dom?e.dom(t).cloneNode(!0):n?n(t).clone(!0)[0]:t.cloneNode(!0)}function _(t,e){R(t,"position","absolute"),R(t,"top",e.top),R(t,"left",e.left),R(t,"width",e.width),R(t,"height",e.height)}function C(t){R(t,"position",""),R(t,"top",""),R(t,"left",""),R(t,"width",""),R(t,"height","")}var j="Sortable"+(new Date).getTime();function T(){var e,o=[];return{captureAnimationState:function(){o=[],this.options.animation&&[].slice.call(this.el.children).forEach(function(t){if("none"!==R(t,"display")&&t!==kt.ghost){o.push({target:t,rect:X(t)});var e=I({},o[o.length-1].rect);if(t.thisAnimationDuration){var n=v(t,!0);n&&(e.top-=n.f,e.left-=n.e)}t.fromRect=e}})},addAnimationState:function(t){o.push(t)},removeAnimationState:function(t){o.splice(function(t,e){for(var n in t)if(t.hasOwnProperty(n))for(var o in e)if(e.hasOwnProperty(o)&&e[o]===t[n][o])return Number(n);return-1}(o,{target:t}),1)},animateAll:function(t){var c=this;if(!this.options.animation)return clearTimeout(e),void("function"==typeof t&&t());var u=!1,d=0;o.forEach(function(t){var e=0,n=t.target,o=n.fromRect,i=X(n),r=n.prevFromRect,a=n.prevToRect,l=t.rect,s=v(n,!0);s&&(i.top-=s.f,i.left-=s.e),n.toRect=i,n.thisAnimationDuration&&y(r,i)&&!y(o,i)&&(l.top-i.top)/(l.left-i.left)==(o.top-i.top)/(o.left-i.left)&&(e=function(t,e,n,o){return Math.sqrt(Math.pow(e.top-t.top,2)+Math.pow(e.left-t.left,2))/Math.sqrt(Math.pow(e.top-n.top,2)+Math.pow(e.left-n.left,2))*o.animation}(l,r,a,c.options)),y(i,o)||(n.prevFromRect=o,n.prevToRect=i,e||(e=c.options.animation),c.animate(n,l,i,e)),e&&(u=!0,d=Math.max(d,e),clearTimeout(n.animationResetTimer),n.animationResetTimer=setTimeout(function(){n.animationTime=0,n.prevFromRect=null,n.fromRect=null,n.prevToRect=null,n.thisAnimationDuration=null},e),n.thisAnimationDuration=e)}),clearTimeout(e),u?e=setTimeout(function(){"function"==typeof t&&t()},d):"function"==typeof t&&t(),o=[]},animate:function(t,e,n,o){if(o){R(t,"transition",""),R(t,"transform","");var i=v(this.el),r=i&&i.a,a=i&&i.d,l=(e.left-n.left)/(r||1),s=(e.top-n.top)/(a||1);t.animatingX=!!l,t.animatingY=!!s,R(t,"transform","translate3d("+l+"px,"+s+"px,0)"),function(t){t.offsetWidth}(t),R(t,"transition","transform "+o+"ms"+(this.options.easing?" "+this.options.easing:"")),R(t,"transform","translate3d(0,0,0)"),"number"==typeof t.animated&&clearTimeout(t.animated),t.animated=setTimeout(function(){R(t,"transition",""),R(t,"transform",""),t.animated=!1,t.animatingX=!1,t.animatingY=!1},o)}}}}var x=[],M={initializeByDefault:!0},O={mount:function(t){for(var e in M)!M.hasOwnProperty(e)||e in t||(t[e]=M[e]);x.push(t)},pluginEvent:function(e,n,o){var t=this;this.eventCanceled=!1,o.cancel=function(){t.eventCanceled=!0};var i=e+"Global";x.forEach(function(t){n[t.pluginName]&&(n[t.pluginName][i]&&n[t.pluginName][i](I({sortable:n},o)),n.options[t.pluginName]&&n[t.pluginName][e]&&n[t.pluginName][e](I({sortable:n},o)))})},initializePlugins:function(o,i,r,t){for(var e in x.forEach(function(t){var e=t.pluginName;if(o.options[e]||t.initializeByDefault){var n=new t(o,i,o.options);n.sortable=o,n.options=o.options,o[e]=n,a(r,n.defaults)}}),o.options)if(o.options.hasOwnProperty(e)){var n=this.modifyOption(o,e,o.options[e]);void 0!==n&&(o.options[e]=n)}},getEventProperties:function(e,n){var o={};return x.forEach(function(t){"function"==typeof t.eventProperties&&a(o,t.eventProperties.call(n[t.pluginName],e))}),o},modifyOption:function(e,n,o){var i;return x.forEach(function(t){e[t.pluginName]&&t.optionListeners&&"function"==typeof t.optionListeners[n]&&(i=t.optionListeners[n].call(e[t.pluginName],o))}),i}};function A(t){var e=t.sortable,n=t.rootEl,o=t.name,i=t.targetEl,r=t.cloneEl,a=t.toEl,l=t.fromEl,s=t.oldIndex,c=t.newIndex,u=t.oldDraggableIndex,d=t.newDraggableIndex,h=t.originalEvent,f=t.putSortable,p=t.extraEventProperties;if(e=e||n&&n[j]){var g,v=e.options,m="on"+o.charAt(0).toUpperCase()+o.substr(1);!window.CustomEvent||w||E?(g=document.createEvent("Event")).initEvent(o,!0,!0):g=new CustomEvent(o,{bubbles:!0,cancelable:!0}),g.to=a||n,g.from=l||n,g.item=i||n,g.clone=r,g.oldIndex=s,g.newIndex=c,g.oldDraggableIndex=u,g.newDraggableIndex=d,g.originalEvent=h,g.pullMode=f?f.lastPutMode:void 0;var b=I({},p,O.getEventProperties(o,e));for(var y in b)g[y]=b[y];n&&n.dispatchEvent(g),v[m]&&v[m].call(e,g)}}function K(t,e,n){var o=2<arguments.length&&void 0!==n?n:{},i=o.evt,r=l(o,["evt"]);O.pluginEvent.bind(kt)(t,e,I({dragEl:z,parentEl:G,ghostEl:U,rootEl:q,nextEl:V,lastDownEl:Z,cloneEl:Q,cloneHidden:$,dragStarted:dt,putSortable:it,activeSortable:kt.active,originalEvent:i,oldIndex:J,oldDraggableIndex:et,newIndex:tt,newDraggableIndex:nt,hideGhostForTarget:At,unhideGhostForTarget:Nt,cloneNowHidden:function(){$=!0},cloneNowShown:function(){$=!1},dispatchSortableEvent:function(t){W({sortable:e,name:t,originalEvent:i})}},r))}function W(t){A(I({putSortable:it,cloneEl:Q,targetEl:z,rootEl:q,oldIndex:J,oldDraggableIndex:et,newIndex:tt,newDraggableIndex:nt},t))}if("undefined"==typeof window||!window.document)throw new Error("Sortable.js requires a window with a document");var z,G,U,q,V,Z,Q,$,J,tt,et,nt,ot,it,rt,at,lt,st,ct,ut,dt,ht,ft,pt,gt,vt=!1,mt=!1,bt=[],yt=!1,wt=!1,Et=[],Dt=!1,St=[],_t=n,Ct=E||w?"cssFloat":"float",Tt=!i&&!n&&"draggable"in document.createElement("div"),xt=function(){if(w)return!1;var t=document.createElement("x");return t.style.cssText="pointer-events:auto","auto"===t.style.pointerEvents}(),Mt=function(t,e){var n=R(t),o=parseInt(n.width)-parseInt(n.paddingLeft)-parseInt(n.paddingRight)-parseInt(n.borderLeftWidth)-parseInt(n.borderRightWidth),i=m(t,0,e),r=m(t,1,e),a=i&&R(i),l=r&&R(r),s=a&&parseInt(a.marginLeft)+parseInt(a.marginRight)+X(i).width,c=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+X(r).width;if("flex"===n.display)return"column"===n.flexDirection||"column-reverse"===n.flexDirection?"vertical":"horizontal";if("grid"===n.display)return n.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(i&&a.float&&"none"!==a.float){var u="left"===a.float?"left":"right";return!r||"both"!==l.clear&&l.clear!==u?"horizontal":"vertical"}return i&&("block"===a.display||"flex"===a.display||"table"===a.display||"grid"===a.display||o<=s&&"none"===n[Ct]||r&&"none"===n[Ct]&&o<s+c)?"vertical":"horizontal"},Ot=function(t){function s(a,l){return function(t,e,n,o){var i=t.options.group.name&&e.options.group.name&&t.options.group.name===e.options.group.name;if(null==a&&(l||i))return!0;if(null==a||!1===a)return!1;if(l&&"clone"===a)return a;if("function"==typeof a)return s(a(t,e,n,o),l)(t,e,n,o);var r=(l?t:e).options.group.name;return!0===a||"string"==typeof a&&a===r||a.join&&-1<a.indexOf(r)}}var e={},n=t.group;n&&"object"==o(n)||(n={name:n}),e.name=n.name,e.checkPull=s(n.pull,!0),e.checkPut=s(n.put),e.revertClone=n.revertClone,t.group=e},At=function(){!xt&&U&&R(U,"display","none")},Nt=function(){!xt&&U&&R(U,"display","")};document.addEventListener("click",function(t){if(mt)return t.preventDefault(),t.stopPropagation&&t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation(),mt=!1},!0);function It(t){if(z){var e=function(r,a){var l;return bt.some(function(t){if(!B(t)){var e=X(t),n=t[j].options.emptyInsertThreshold,o=r>=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[j]._onDragOver(n)}}}function Pt(t){z&&z.parentNode[j]._isOutsideThisEl(t.target)}function kt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[j]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Mt(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==kt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in O.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in Ot(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&Tt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?u(t,"pointerdown",this._onTapStart):(u(t,"mousedown",this._onTapStart),u(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(u(t,"dragover",this),u(t,"dragenter",this)),bt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,T())}function Rt(t,e,n,o,i,r,a,l){var s,c,u=t[j],d=u.options.onMove;return!window.CustomEvent||w||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function Xt(t){t.draggable=!1}function Yt(){Dt=!1}function Bt(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Ft(t){return setTimeout(t,0)}function Ht(t){return clearTimeout(t)}kt.prototype={constructor:kt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ht=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,z):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){St.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&St.push(o)}}(o),!z&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=P(l,t.draggable,o,!1))&&l.animated||Z===l)){if(J=F(l),et=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return W({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),K("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=P(s,t.trim(),o,!1))return W({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),K("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!P(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!z&&n.parentNode===r){var s=X(n);if(q=r,G=(z=n).parentNode,V=z.nextSibling,Z=n,ot=a.group,rt={target:kt.dragged=z,clientX:(e||t).clientX,clientY:(e||t).clientY},ct=rt.clientX-s.left,ut=rt.clientY-s.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,z.style["will-change"]="all",o=function(){K("delayEnded",i,{evt:t}),kt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!c&&i.nativeDraggable&&(z.draggable=!0),i._triggerDragStart(t,e),W({sortable:i,name:"choose",originalEvent:t}),k(z,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){g(z,t.trim(),Xt)}),u(l,"dragover",It),u(l,"mousemove",It),u(l,"touchmove",It),u(l,"mouseup",i._onDrop),u(l,"touchend",i._onDrop),u(l,"touchcancel",i._onDrop),c&&this.nativeDraggable&&(this.options.touchStartThreshold=4,z.draggable=!0),K("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||w))o();else{if(kt.eventCanceled)return void this._onDrop();u(l,"mouseup",i._disableDelayedDrag),u(l,"touchend",i._disableDelayedDrag),u(l,"touchcancel",i._disableDelayedDrag),u(l,"mousemove",i._delayedDragTouchMoveHandler),u(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&u(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){z&&Xt(z),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._disableDelayedDrag),d(t,"touchend",this._disableDelayedDrag),d(t,"touchcancel",this._disableDelayedDrag),d(t,"mousemove",this._delayedDragTouchMoveHandler),d(t,"touchmove",this._delayedDragTouchMoveHandler),d(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?u(document,"pointermove",this._onTouchMove):u(document,e?"touchmove":"mousemove",this._onTouchMove):(u(z,"dragend",this),u(q,"dragstart",this._onDragStart));try{document.selection?Ft(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(vt=!1,q&&z){K("dragStarted",this,{evt:e}),this.nativeDraggable&&u(document,"dragover",Pt);var n=this.options;t||k(z,n.dragClass,!1),k(z,n.ghostClass,!0),kt.active=this,t&&this._appendGhost(),W({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(at){this._lastX=at.clientX,this._lastY=at.clientY,At();for(var t=document.elementFromPoint(at.clientX,at.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(at.clientX,at.clientY))!==e;)e=t;if(z.parentNode[j]._isOutsideThisEl(t),e)do{if(e[j]){if(e[j]._onDragOver({clientX:at.clientX,clientY:at.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);Nt()}},_onTouchMove:function(t){if(rt){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=U&&v(U),a=U&&r&&r.a,l=U&&r&&r.d,s=_t&&gt&&b(gt),c=(i.clientX-rt.clientX+o.x)/(a||1)+(s?s[0]-Et[0]:0)/(a||1),u=(i.clientY-rt.clientY+o.y)/(l||1)+(s?s[1]-Et[1]:0)/(l||1);if(!kt.active&&!vt){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))<n)return;this._onDragStart(t,!0)}if(U){r?(r.e+=c-(lt||0),r.f+=u-(st||0)):r={a:1,b:0,c:0,d:1,e:c,f:u};var d="matrix(".concat(r.a,",").concat(r.b,",").concat(r.c,",").concat(r.d,",").concat(r.e,",").concat(r.f,")");R(U,"webkitTransform",d),R(U,"mozTransform",d),R(U,"msTransform",d),R(U,"transform",d),lt=c,st=u,at=i}t.cancelable&&t.preventDefault()}},_appendGhost:function(){if(!U){var t=this.options.fallbackOnBody?document.body:q,e=X(z,!0,_t,!0,t),n=this.options;if(_t){for(gt=t;"static"===R(gt,"position")&&"none"===R(gt,"transform")&&gt!==document;)gt=gt.parentNode;gt!==document.body&&gt!==document.documentElement?(gt===document&&(gt=N()),e.top+=gt.scrollTop,e.left+=gt.scrollLeft):gt=N(),Et=b(gt)}k(U=z.cloneNode(!0),n.ghostClass,!1),k(U,n.fallbackClass,!0),k(U,n.dragClass,!0),R(U,"transition",""),R(U,"transform",""),R(U,"box-sizing","border-box"),R(U,"margin",0),R(U,"top",e.top),R(U,"left",e.left),R(U,"width",e.width),R(U,"height",e.height),R(U,"opacity","0.8"),R(U,"position",_t?"absolute":"fixed"),R(U,"zIndex","100000"),R(U,"pointerEvents","none"),kt.ghost=U,t.appendChild(U),R(U,"transform-origin",ct/parseInt(U.style.width)*100+"% "+ut/parseInt(U.style.height)*100+"%")}},_onDragStart:function(t,e){var n=this,o=t.dataTransfer,i=n.options;K("dragStart",this,{evt:t}),kt.eventCanceled?this._onDrop():(K("setupClone",this),kt.eventCanceled||((Q=S(z)).draggable=!1,Q.style["will-change"]="",this._hideClone(),k(Q,this.options.chosenClass,!1),kt.clone=Q),n.cloneId=Ft(function(){K("clone",n),kt.eventCanceled||(n.options.removeCloneOnHide||q.insertBefore(Q,z),n._hideClone(),W({sortable:n,name:"clone"}))}),e||k(z,i.dragClass,!0),e?(mt=!0,n._loopId=setInterval(n._emulateDragOver,50)):(d(document,"mouseup",n._onDrop),d(document,"touchend",n._onDrop),d(document,"touchcancel",n._onDrop),o&&(o.effectAllowed="move",i.setData&&i.setData.call(n,o,z)),u(document,"drop",n),R(z,"transform","translateZ(0)")),vt=!0,n._dragStartId=Ft(n._dragStarted.bind(n,e,t)),u(document,"selectstart",n),dt=!0,s&&R(document.body,"user-select","none"))},_onDragOver:function(n){var o,i,r,a,l=this.el,s=n.target,e=this.options,t=e.group,c=kt.active,u=ot===t,d=e.sort,h=it||c,f=this,p=!1;if(!Dt){if(void 0!==n.preventDefault&&n.cancelable&&n.preventDefault(),s=P(s,e.draggable,l,!0),M("dragOver"),kt.eventCanceled)return p;if(z.contains(n.target)||s.animated&&s.animatingX&&s.animatingY||f._ignoreWhileAnimating===s)return A(!1);if(mt=!1,c&&!e.disabled&&(u?d||(r=!q.contains(z)):it===this||(this.lastPutMode=ot.checkPull(this,c,z,n))&&t.checkPut(this,c,z,n))){if(a="vertical"===this._getDirection(n,s),o=X(z),M("dragOverValid"),kt.eventCanceled)return p;if(r)return G=q,O(),this._hideClone(),M("revert"),kt.eventCanceled||(V?q.insertBefore(z,V):q.appendChild(z)),A(!0);var g=B(l,e.draggable);if(!g||function(t,e,n){var o=X(B(n.el,n.options.draggable));return e?t.clientX>o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===z)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==Rt(q,l,z,o,s,i,n,!!s))return O(),l.appendChild(z),G=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,y=z.parentNode!==l,w=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(z.animated&&z.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,"top","top")||Y(z,"top","top"),S=D?D.scrollTop:void 0;if(ht!==s&&(m=i[E],yt=!1,wt=!w&&e.invertSwap||y),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&pt<c*i){if(!yt&&(1===ft?u+c*r/2<s:s<d-c*r/2)&&(yt=!0),yt)h=!0;else if(1===ft?s<u+pt:d-pt<s)return-ft}else if(u+c*(1-i)/2<s&&s<d-c*(1-i)/2)return function(t){return F(z)<F(t)?1:-1}(e);if((h=h||a)&&(s<u+c*r/2||d-c*r/2<s))return u+c/2<s?1:-1;return 0}(n,s,i,a,w?1:e.swapThreshold,null==e.invertedSwapThreshold?e.swapThreshold:e.invertedSwapThreshold,wt,ht===s)))for(var _=F(z);_-=v,(b=G.children[_])&&("none"===R(b,"display")||b===U););if(0===v||b===s)return A(!1);ft=v;var C=(ht=s).nextElementSibling,T=!1,x=Rt(q,l,z,o,s,i,n,T=1===v);if(!1!==x)return 1!==x&&-1!==x||(T=1===x),Dt=!0,setTimeout(Yt,30),O(),T&&!C?l.appendChild(z):s.parentNode.insertBefore(z,T?C:s),D&&L(D,0,S-D.scrollTop),G=z.parentNode,void 0===m||wt||(pt=Math.abs(m-X(s)[E])),N(),A(!0)}if(l.contains(z))return A(!1)}return!1}function M(t,e){K(t,f,I({evt:n,isOwner:u,axis:a?"vertical":"horizontal",revert:r,dragRect:o,targetRect:i,canSort:d,fromSortable:h,target:s,completed:A,onMove:function(t,e){return Rt(q,l,z,o,t,X(t),n,e)},changed:N},e))}function O(){M("dragOverAnimationCapture"),f.captureAnimationState(),f!==h&&h.captureAnimationState()}function A(t){return M("dragOverCompleted",{insertion:t}),t&&(u?c._hideClone():c._showClone(f),f!==h&&(k(z,it?it.options.ghostClass:c.options.ghostClass,!1),k(z,e.ghostClass,!0)),it!==f&&f!==kt.active?it=f:f===kt.active&&it&&(it=null),h===f&&(f._ignoreWhileAnimating=s),f.animateAll(function(){M("dragOverAnimationComplete"),f._ignoreWhileAnimating=null}),f!==h&&(h.animateAll(),h._ignoreWhileAnimating=null)),(s===z&&!z.animated||s===l&&!s.animated)&&(ht=null),e.dragoverBubble||n.rootEl||s===document||(z.parentNode[j]._isOutsideThisEl(n.target),t||It(n)),!e.dragoverBubble&&n.stopPropagation&&n.stopPropagation(),p=!0}function N(){tt=F(z),nt=F(z,e.draggable),W({sortable:f,name:"change",toEl:l,newIndex:tt,newDraggableIndex:nt,originalEvent:n})}},_ignoreWhileAnimating:null,_offMoveEvents:function(){d(document,"mousemove",this._onTouchMove),d(document,"touchmove",this._onTouchMove),d(document,"pointermove",this._onTouchMove),d(document,"dragover",It),d(document,"mousemove",It),d(document,"touchmove",It)},_offUpEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._onDrop),d(t,"touchend",this._onDrop),d(t,"pointerup",this._onDrop),d(t,"touchcancel",this._onDrop),d(document,"selectstart",this)},_onDrop:function(t){var e=this.el,n=this.options;tt=F(z),nt=F(z,n.draggable),K("drop",this,{evt:t}),G=z&&z.parentNode,tt=F(z),nt=F(z,n.draggable),kt.eventCanceled||(yt=wt=vt=!1,clearInterval(this._loopId),clearTimeout(this._dragStartTimer),Ht(this.cloneId),Ht(this._dragStartId),this.nativeDraggable&&(d(document,"drop",this),d(e,"dragstart",this._onDragStart)),this._offMoveEvents(),this._offUpEvents(),s&&R(document.body,"user-select",""),t&&(dt&&(t.cancelable&&t.preventDefault(),n.dropBubble||t.stopPropagation()),U&&U.parentNode&&U.parentNode.removeChild(U),(q===G||it&&"clone"!==it.lastPutMode)&&Q&&Q.parentNode&&Q.parentNode.removeChild(Q),z&&(this.nativeDraggable&&d(z,"dragend",this),Xt(z),z.style["will-change"]="",dt&&!vt&&k(z,it?it.options.ghostClass:this.options.ghostClass,!1),k(z,this.options.chosenClass,!1),W({sortable:this,name:"unchoose",toEl:G,newIndex:null,newDraggableIndex:null,originalEvent:t}),q!==G?(0<=tt&&(W({rootEl:G,name:"add",toEl:G,fromEl:q,originalEvent:t}),W({sortable:this,name:"remove",toEl:G,originalEvent:t}),W({rootEl:G,name:"sort",toEl:G,fromEl:q,originalEvent:t}),W({sortable:this,name:"sort",toEl:G,originalEvent:t})),it&&it.save()):tt!==J&&0<=tt&&(W({sortable:this,name:"update",toEl:G,originalEvent:t}),W({sortable:this,name:"sort",toEl:G,originalEvent:t})),kt.active&&(null!=tt&&-1!==tt||(tt=J,nt=et),W({sortable:this,name:"end",toEl:G,originalEvent:t}),this.save())))),this._nulling()},_nulling:function(){K("nulling",this),q=z=G=U=V=Q=Z=$=rt=at=dt=tt=nt=J=et=ht=ft=it=ot=kt.dragged=kt.ghost=kt.clone=kt.active=null,St.forEach(function(t){t.checked=!0}),St.length=lt=st=0},handleEvent:function(t){switch(t.type){case"drop":case"dragend":this._onDrop(t);break;case"dragenter":case"dragover":z&&(this._onDragOver(t),function(t){t.dataTransfer&&(t.dataTransfer.dropEffect="move");t.cancelable&&t.preventDefault()}(t));break;case"selectstart":t.preventDefault()}},toArray:function(){for(var t,e=[],n=this.el.children,o=0,i=n.length,r=this.options;o<i;o++)P(t=n[o],r.draggable,this.el,!1)&&e.push(t.getAttribute(r.dataIdAttr)||Bt(t));return e},sort:function(t){var o={},i=this.el;this.toArray().forEach(function(t,e){var n=i.children[e];P(n,this.options.draggable,i,!1)&&(o[t]=n)},this),t.forEach(function(t){o[t]&&(i.removeChild(o[t]),i.appendChild(o[t]))})},save:function(){var t=this.options.store;t&&t.set&&t.set(this)},closest:function(t,e){return P(t,e||this.options.draggable,this.el,!1)},option:function(t,e){var n=this.options;if(void 0===e)return n[t];var o=O.modifyOption(this,t,e);n[t]=void 0!==o?o:e,"group"===t&&Ot(n)},destroy:function(){K("destroy",this);var t=this.el;t[j]=null,d(t,"mousedown",this._onTapStart),d(t,"touchstart",this._onTapStart),d(t,"pointerdown",this._onTapStart),this.nativeDraggable&&(d(t,"dragover",this),d(t,"dragenter",this)),Array.prototype.forEach.call(t.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")}),this._onDrop(),bt.splice(bt.indexOf(this.el),1),this.el=t=null},_hideClone:function(){if(!$){if(K("hideClone",this),kt.eventCanceled)return;R(Q,"display","none"),this.options.removeCloneOnHide&&Q.parentNode&&Q.parentNode.removeChild(Q),$=!0}},_showClone:function(t){if("clone"===t.lastPutMode){if($){if(K("showClone",this),kt.eventCanceled)return;q.contains(z)&&!this.options.group.revertClone?q.insertBefore(Q,z):V?q.insertBefore(Q,V):q.appendChild(Q),this.options.group.revertClone&&this.animate(z,Q),R(Q,"display",""),$=!1}}else this._hideClone()}},u(document,"touchmove",function(t){(kt.active||vt)&&t.cancelable&&t.preventDefault()}),kt.utils={on:u,off:d,css:R,find:g,is:function(t,e){return!!P(t,e,t,!1)},extend:function(t,e){if(t&&e)for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t},throttle:D,closest:P,toggleClass:k,clone:S,index:F,nextTick:Ft,cancelNextTick:Ht,detectDirection:Mt,getChild:m},kt.get=function(t){return t[j]},kt.mount=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];e[0].constructor===Array&&(e=e[0]),e.forEach(function(t){if(!t.prototype||!t.prototype.constructor)throw"Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(t));t.utils&&(kt.utils=I({},kt.utils,t.utils)),O.mount(t)})},kt.create=function(t,e){return new kt(t,e)};var Lt,jt,Kt,Wt,zt,Gt,Ut=[],qt=!(kt.version="1.10.0");function Vt(){Ut.forEach(function(t){clearInterval(t.pid)}),Ut=[]}function Zt(){clearInterval(Gt)}function Qt(t){var e=t.originalEvent,n=t.putSortable,o=t.dragEl,i=t.activeSortable,r=t.dispatchSortableEvent,a=t.hideGhostForTarget,l=t.unhideGhostForTarget,s=n||i;a();var c=e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e,u=document.elementFromPoint(c.clientX,c.clientY);l(),s&&!s.el.contains(u)&&(r("spill"),this.onSpill({dragEl:o,putSortable:n}))}var $t,Jt=D(function(n,t,e,o){if(t.scroll){var i,r=(n.touches?n.touches[0]:n).clientX,a=(n.touches?n.touches[0]:n).clientY,l=t.scrollSensitivity,s=t.scrollSpeed,c=N(),u=!1;jt!==e&&(jt=e,Vt(),Lt=t.scroll,i=t.scrollFn,!0===Lt&&(Lt=H(e,!0)));var d=0,h=Lt;do{var f=h,p=X(f),g=p.top,v=p.bottom,m=p.left,b=p.right,y=p.width,w=p.height,E=void 0,D=void 0,S=f.scrollWidth,_=f.scrollHeight,C=R(f),T=f.scrollLeft,x=f.scrollTop;D=f===c?(E=y<S&&("auto"===C.overflowX||"scroll"===C.overflowX||"visible"===C.overflowX),w<_&&("auto"===C.overflowY||"scroll"===C.overflowY||"visible"===C.overflowY)):(E=y<S&&("auto"===C.overflowX||"scroll"===C.overflowX),w<_&&("auto"===C.overflowY||"scroll"===C.overflowY));var M=E&&(Math.abs(b-r)<=l&&T+y<S)-(Math.abs(m-r)<=l&&!!T),O=D&&(Math.abs(v-a)<=l&&x+w<_)-(Math.abs(g-a)<=l&&!!x);if(!Ut[d])for(var A=0;A<=d;A++)Ut[A]||(Ut[A]={});Ut[d].vx==M&&Ut[d].vy==O&&Ut[d].el===f||(Ut[d].el=f,Ut[d].vx=M,Ut[d].vy=O,clearInterval(Ut[d].pid),0==M&&0==O||(u=!0,Ut[d].pid=setInterval(function(){o&&0===this.layer&&kt.active._onTouchMove(zt);var t=Ut[this.layer].vy?Ut[this.layer].vy*s:0,e=Ut[this.layer].vx?Ut[this.layer].vx*s:0;"function"==typeof i&&"continue"!==i.call(kt.dragged.parentNode[j],e,t,n,zt,Ut[this.layer].el)||L(Ut[this.layer].el,e,t)}.bind({layer:d}),24))),d++}while(t.bubbleScroll&&h!==c&&(h=H(h,!1)));qt=u}},30);function te(){}function ee(){}te.prototype={startIndex:null,dragStart:function(t){var e=t.oldDraggableIndex;this.startIndex=e},onSpill:function(t){var e=t.dragEl,n=t.putSortable;this.sortable.captureAnimationState(),n&&n.captureAnimationState();var o=m(this.sortable.el,this.startIndex,this.options);o?this.sortable.el.insertBefore(e,o):this.sortable.el.appendChild(e),this.sortable.animateAll(),n&&n.animateAll()},drop:Qt},a(te,{pluginName:"revertOnSpill"}),ee.prototype={onSpill:function(t){var e=t.dragEl,n=t.putSortable||this.sortable;n.captureAnimationState(),e.parentNode&&e.parentNode.removeChild(e),n.animateAll()},drop:Qt},a(ee,{pluginName:"removeOnSpill"});var ne,oe,ie,re,ae,le=[],se=[],ce=!1,ue=!1,de=!1;function he(o,i){se.forEach(function(t,e){var n=i.children[t.sortableIndex+(o?Number(e):0)];n?i.insertBefore(t,n):i.appendChild(t)})}function fe(){le.forEach(function(t){t!==ie&&t.parentNode&&t.parentNode.removeChild(t)})}return kt.mount(new function(){function t(){for(var t in this.defaults={scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0},this)"_"===t.charAt(0)&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}return t.prototype={dragStarted:function(t){var e=t.originalEvent;this.sortable.nativeDraggable?u(document,"dragover",this._handleAutoScroll):this.options.supportPointer?u(document,"pointermove",this._handleFallbackAutoScroll):e.touches?u(document,"touchmove",this._handleFallbackAutoScroll):u(document,"mousemove",this._handleFallbackAutoScroll)},dragOverCompleted:function(t){var e=t.originalEvent;this.options.dragOverBubble||e.rootEl||this._handleAutoScroll(e)},drop:function(){this.sortable.nativeDraggable?d(document,"dragover",this._handleAutoScroll):(d(document,"pointermove",this._handleFallbackAutoScroll),d(document,"touchmove",this._handleFallbackAutoScroll),d(document,"mousemove",this._handleFallbackAutoScroll)),Zt(),Vt(),clearTimeout(f),f=void 0},nulling:function(){zt=jt=Lt=qt=Gt=Kt=Wt=null,Ut.length=0},_handleFallbackAutoScroll:function(t){this._handleAutoScroll(t,!0)},_handleAutoScroll:function(e,n){var o=this,i=(e.touches?e.touches[0]:e).clientX,r=(e.touches?e.touches[0]:e).clientY,t=document.elementFromPoint(i,r);if(zt=e,n||E||w||s){Jt(e,this.options,t,n);var a=H(t,!0);!qt||Gt&&i===Kt&&r===Wt||(Gt&&Zt(),Gt=setInterval(function(){var t=H(document.elementFromPoint(i,r),!0);t!==a&&(a=t,Vt()),Jt(e,o.options,t,n)},10),Kt=i,Wt=r)}else{if(!this.options.bubbleScroll||H(t,!0)===N())return void Vt();Jt(e,this.options,H(t,!1),!1)}}},a(t,{pluginName:"scroll",initializeByDefault:!0})}),kt.mount(ee,te),kt.mount(new function(){function t(){this.defaults={swapClass:"sortable-swap-highlight"}}return t.prototype={dragStart:function(t){var e=t.dragEl;$t=e},dragOverValid:function(t){var e=t.completed,n=t.target,o=t.onMove,i=t.activeSortable,r=t.changed,a=t.cancel;if(i.options.swap){var l=this.sortable.el,s=this.options;if(n&&n!==l){var c=$t;$t=!1!==o(n)?(k(n,s.swapClass,!0),n):null,c&&c!==$t&&k(c,s.swapClass,!1)}r(),e(!0),a()}},drop:function(t){var e=t.activeSortable,n=t.putSortable,o=t.dragEl,i=n||this.sortable,r=this.options;$t&&k($t,r.swapClass,!1),$t&&(r.swap||n&&n.options.swap)&&o!==$t&&(i.captureAnimationState(),i!==e&&e.captureAnimationState(),function(t,e){var n,o,i=t.parentNode,r=e.parentNode;if(!i||!r||i.isEqualNode(e)||r.isEqualNode(t))return;n=F(t),o=F(e),i.isEqualNode(r)&&n<o&&o++;i.insertBefore(e,i.children[n]),r.insertBefore(t,r.children[o])}(o,$t),i.animateAll(),i!==e&&e.animateAll())},nulling:function(){$t=null}},a(t,{pluginName:"swap",eventProperties:function(){return{swapItem:$t}}})}),kt.mount(new function(){function t(o){for(var t in this)"_"===t.charAt(0)&&"function"==typeof this[t]&&(this[t]=this[t].bind(this));o.options.supportPointer?u(document,"pointerup",this._deselectMultiDrag):(u(document,"mouseup",this._deselectMultiDrag),u(document,"touchend",this._deselectMultiDrag)),u(document,"keydown",this._checkKeyDown),u(document,"keyup",this._checkKeyUp),this.defaults={selectedClass:"sortable-selected",multiDragKey:null,setData:function(t,e){var n="";le.length&&oe===o?le.forEach(function(t,e){n+=(e?", ":"")+t.textContent}):n=e.textContent,t.setData("Text",n)}}}return t.prototype={multiDragKeyDown:!1,isMultiDrag:!1,delayStartGlobal:function(t){var e=t.dragEl;ie=e},delayEnded:function(){this.isMultiDrag=~le.indexOf(ie)},setupClone:function(t){var e=t.sortable,n=t.cancel;if(this.isMultiDrag){for(var o=0;o<le.length;o++)se.push(S(le[o])),se[o].sortableIndex=le[o].sortableIndex,se[o].draggable=!1,se[o].style["will-change"]="",k(se[o],this.options.selectedClass,!1),le[o]===ie&&k(se[o],this.options.chosenClass,!1);e._hideClone(),n()}},clone:function(t){var e=t.sortable,n=t.rootEl,o=t.dispatchSortableEvent,i=t.cancel;this.isMultiDrag&&(this.options.removeCloneOnHide||le.length&&oe===e&&(he(!0,n),o("clone"),i()))},showClone:function(t){var e=t.cloneNowShown,n=t.rootEl,o=t.cancel;this.isMultiDrag&&(he(!1,n),se.forEach(function(t){R(t,"display","")}),e(),ae=!1,o())},hideClone:function(t){var e=this,n=(t.sortable,t.cloneNowHidden),o=t.cancel;this.isMultiDrag&&(se.forEach(function(t){R(t,"display","none"),e.options.removeCloneOnHide&&t.parentNode&&t.parentNode.removeChild(t)}),n(),ae=!0,o())},dragStartGlobal:function(t){t.sortable;!this.isMultiDrag&&oe&&oe.multiDrag._deselectMultiDrag(),le.forEach(function(t){t.sortableIndex=F(t)}),le=le.sort(function(t,e){return t.sortableIndex-e.sortableIndex}),de=!0},dragStarted:function(t){var e=this,n=t.sortable;if(this.isMultiDrag){if(this.options.sort&&(n.captureAnimationState(),this.options.animation)){le.forEach(function(t){t!==ie&&R(t,"position","absolute")});var o=X(ie,!1,!0,!0);le.forEach(function(t){t!==ie&&_(t,o)}),ce=ue=!0}n.animateAll(function(){ce=ue=!1,e.options.animation&&le.forEach(function(t){C(t)}),e.options.sort&&fe()})}},dragOver:function(t){var e=t.target,n=t.completed,o=t.cancel;ue&&~le.indexOf(e)&&(n(!1),o())},revert:function(t){var e=t.fromSortable,n=t.rootEl,o=t.sortable,i=t.dragRect;1<le.length&&(le.forEach(function(t){o.addAnimationState({target:t,rect:ue?X(t):i}),C(t),t.fromRect=i,e.removeAnimationState(t)}),ue=!1,function(o,i){le.forEach(function(t,e){var n=i.children[t.sortableIndex+(o?Number(e):0)];n?i.insertBefore(t,n):i.appendChild(t)})}(!this.options.removeCloneOnHide,n))},dragOverCompleted:function(t){var e=t.sortable,n=t.isOwner,o=t.insertion,i=t.activeSortable,r=t.parentEl,a=t.putSortable,l=this.options;if(o){if(n&&i._hideClone(),ce=!1,l.animation&&1<le.length&&(ue||!n&&!i.options.sort&&!a)){var s=X(ie,!1,!0,!0);le.forEach(function(t){t!==ie&&(_(t,s),r.appendChild(t))}),ue=!0}if(!n)if(ue||fe(),1<le.length){var c=ae;i._showClone(e),i.options.animation&&!ae&&c&&se.forEach(function(t){i.addAnimationState({target:t,rect:re}),t.fromRect=re,t.thisAnimationDuration=null})}else i._showClone(e)}},dragOverAnimationCapture:function(t){var e=t.dragRect,n=t.isOwner,o=t.activeSortable;if(le.forEach(function(t){t.thisAnimationDuration=null}),o.options.animation&&!n&&o.multiDrag.isMultiDrag){re=a({},e);var i=v(ie,!0);re.top-=i.f,re.left-=i.e}},dragOverAnimationComplete:function(){ue&&(ue=!1,fe())},drop:function(t){var e=t.originalEvent,n=t.rootEl,o=t.parentEl,i=t.sortable,r=t.dispatchSortableEvent,a=t.oldIndex,l=t.putSortable,s=l||this.sortable;if(e){var c=this.options,u=o.children;if(!de)if(c.multiDragKey&&!this.multiDragKeyDown&&this._deselectMultiDrag(),k(ie,c.selectedClass,!~le.indexOf(ie)),~le.indexOf(ie))le.splice(le.indexOf(ie),1),ne=null,A({sortable:i,rootEl:n,name:"deselect",targetEl:ie,originalEvt:e});else{if(le.push(ie),A({sortable:i,rootEl:n,name:"select",targetEl:ie,originalEvt:e}),e.shiftKey&&ne&&i.el.contains(ne)){var d,h,f=F(ne),p=F(ie);if(~f&&~p&&f!==p)for(d=f<p?(h=f,p):(h=p,f+1);h<d;h++)~le.indexOf(u[h])||(k(u[h],c.selectedClass,!0),le.push(u[h]),A({sortable:i,rootEl:n,name:"select",targetEl:u[h],originalEvt:e}))}else ne=ie;oe=s}if(de&&this.isMultiDrag){if((o[j].options.sort||o!==n)&&1<le.length){var g=X(ie),v=F(ie,":not(."+this.options.selectedClass+")");if(!ce&&c.animation&&(ie.thisAnimationDuration=null),s.captureAnimationState(),!ce&&(c.animation&&(ie.fromRect=g,le.forEach(function(t){if(t.thisAnimationDuration=null,t!==ie){var e=ue?X(t):g;t.fromRect=e,s.addAnimationState({target:t,rect:e})}})),fe(),le.forEach(function(t){u[v]?o.insertBefore(t,u[v]):o.appendChild(t),v++}),a===F(ie))){var m=!1;le.forEach(function(t){t.sortableIndex===F(t)||(m=!0)}),m&&r("update")}le.forEach(function(t){C(t)}),s.animateAll()}oe=s}(n===o||l&&"clone"!==l.lastPutMode)&&se.forEach(function(t){t.parentNode&&t.parentNode.removeChild(t)})}},nullingGlobal:function(){this.isMultiDrag=de=!1,se.length=0},destroyGlobal:function(){this._deselectMultiDrag(),d(document,"pointerup",this._deselectMultiDrag),d(document,"mouseup",this._deselectMultiDrag),d(document,"touchend",this._deselectMultiDrag),d(document,"keydown",this._checkKeyDown),d(document,"keyup",this._checkKeyUp)},_deselectMultiDrag:function(t){if(!de&&oe===this.sortable&&!(t&&P(t.target,this.options.draggable,this.sortable.el,!1)||t&&0!==t.button))for(;le.length;){var e=le[0];k(e,this.options.selectedClass,!1),le.shift(),A({sortable:this.sortable,rootEl:this.sortable.el,name:"deselect",targetEl:e,originalEvt:t})}},_checkKeyDown:function(t){t.key===this.options.multiDragKey&&(this.multiDragKeyDown=!0)},_checkKeyUp:function(t){t.key===this.options.multiDragKey&&(this.multiDragKeyDown=!1)}},a(t,{pluginName:"multiDrag",utils:{select:function(t){var e=t.parentNode[j];e&&e.options.multiDrag&&!~le.indexOf(t)&&(oe&&oe!==e&&(oe.multiDrag._deselectMultiDrag(),oe=e),k(t,e.options.selectedClass,!0),le.push(t))},deselect:function(t){var e=t.parentNode[j],n=le.indexOf(t);e&&e.options.multiDrag&&~n&&(k(t,e.options.selectedClass,!1),le.splice(n,1))}},eventProperties:function(){var n=this,o=[],i=[];return le.forEach(function(t){var e;o.push({multiDragElement:t,index:t.sortableIndex}),e=ue&&t!==ie?-1:ue?F(t,":not(."+n.options.selectedClass+")"):F(t),i.push({multiDragElement:t,index:e})}),{items:e(le),clones:[].concat(se),oldIndicies:o,newIndicies:i}},optionListeners:{multiDragKey:function(t){return"ctrl"===(t=t.toLowerCase())?t="Control":1<t.length&&(t=t.charAt(0).toUpperCase()+t.substr(1)),t}}})}),kt});
\ No newline at end of file
diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index c571394eedca..70ddc4cb30f3 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -795,6 +795,7 @@ jquery.ui.sortable:
     - core/jquery.ui
     - core/jquery.ui.mouse
     - core/jquery.ui.widget
+  deprecated: The "%library_id%" asset library is deprecated in drupal:8.8.0 and is removed from drupal:9.0.0. See https://www.drupal.org/node/3084730
 
 jquery.ui.spinner:
   version: *jquery_ui_version
@@ -850,6 +851,7 @@ jquery.ui.touch-punch:
     - core/jquery.ui
     - core/jquery.ui.mouse
     - core/jquery.ui.widget
+  deprecated: The "%library_id%" asset library is deprecated in drupal:8.8.0 and is removed from drupal:9.0.0. See https://www.drupal.org/node/3084730
 
 jquery.ui.widget:
   version: *jquery_ui_version
@@ -902,6 +904,16 @@ popperjs:
   js:
     assets/vendor/popperjs/popper.min.js: { minified: true }
 
+sortable:
+  remote: https://github.com/SortableJS/Sortable
+  version: "1.10.0"
+  license:
+    name: MIT
+    url: https://github.com/SortableJS/Sortable/tree/master#mit-license
+    gpl-compatible: true
+  js:
+    assets/vendor/sortable/Sortable.min.js: { minified: true }
+
 underscore:
   remote: https://github.com/jashkenas/underscore
   version: "1.8.3"
diff --git a/core/modules/ckeditor/ckeditor.libraries.yml b/core/modules/ckeditor/ckeditor.libraries.yml
index a4d517fa1469..9e2449293c7a 100644
--- a/core/modules/ckeditor/ckeditor.libraries.yml
+++ b/core/modules/ckeditor/ckeditor.libraries.yml
@@ -50,13 +50,11 @@ drupal.ckeditor.admin:
     - core/drupal
     - core/drupalSettings
     - core/jquery.once
-    - core/jquery.ui.sortable
-    - core/jquery.ui.draggable
-    - core/jquery.ui.touch-punch
     - core/backbone
     - core/drupal.dialog
     - core/drupal.announce
     - core/ckeditor
+    - core/sortable
     - editor/drupal.editor.admin
     # Ensure to run after core/drupal.vertical-tabs.
     - core/drupal.vertical-tabs
diff --git a/core/modules/ckeditor/css/ckeditor.admin.css b/core/modules/ckeditor/css/ckeditor.admin.css
index 37cd9cc15627..d1eff01f96a4 100644
--- a/core/modules/ckeditor/css/ckeditor.admin.css
+++ b/core/modules/ckeditor/css/ckeditor.admin.css
@@ -228,6 +228,7 @@
   border-bottom-left-radius: 2px;
 }
 .ckeditor-button-placeholder,
+.ckeditor-buttons .ckeditor-button-placeholder a,
 .ckeditor-toolbar-group-placeholder {
   background: #9dcae7;
 }
diff --git a/core/modules/ckeditor/js/views/KeyboardView.es6.js b/core/modules/ckeditor/js/views/KeyboardView.es6.js
index 250283387229..4c9aead86983 100644
--- a/core/modules/ckeditor/js/views/KeyboardView.es6.js
+++ b/core/modules/ckeditor/js/views/KeyboardView.es6.js
@@ -198,11 +198,6 @@
             if (!result && $originalGroup) {
               $originalGroup.find('.ckeditor-buttons').append($button);
             }
-            // Otherwise refresh the sortables to acknowledge the new button
-            // positions.
-            else {
-              view.$el.find('.ui-sortable').sortable('refresh');
-            }
             // Refocus the target button so that the user can continue from a
             // known place.
             $target.trigger('focus');
diff --git a/core/modules/ckeditor/js/views/KeyboardView.js b/core/modules/ckeditor/js/views/KeyboardView.js
index 4a1717438342..ed0a32994c99 100644
--- a/core/modules/ckeditor/js/views/KeyboardView.js
+++ b/core/modules/ckeditor/js/views/KeyboardView.js
@@ -89,9 +89,7 @@
         Drupal.ckeditor.registerButtonMove(this, $button, function (result) {
           if (!result && $originalGroup) {
             $originalGroup.find('.ckeditor-buttons').append($button);
-          } else {
-              view.$el.find('.ui-sortable').sortable('refresh');
-            }
+          }
 
           $target.trigger('focus');
         });
diff --git a/core/modules/ckeditor/js/views/VisualView.es6.js b/core/modules/ckeditor/js/views/VisualView.es6.js
index a7304f98a102..35f61dd8b920 100644
--- a/core/modules/ckeditor/js/views/VisualView.es6.js
+++ b/core/modules/ckeditor/js/views/VisualView.es6.js
@@ -4,7 +4,7 @@
  *   configuration.
  */
 
-(function(Drupal, Backbone, $) {
+(function(Drupal, Backbone, $, Sortable) {
   Drupal.ckeditor.VisualView = Backbone.View.extend(
     /** @lends Drupal.ckeditor.VisualView# */ {
       events: {
@@ -150,37 +150,23 @@
       },
 
       /**
-       * Handles jQuery Sortable stop sort of a button group.
+       * Handles Sortable stop sort of a button group.
        *
-       * @param {jQuery.Event} event
+       * @param {CustomEvent} event
        *   The event triggered on the group drag.
-       * @param {object} ui
-       *   A jQuery.ui.sortable argument that contains information about the
-       *   elements involved in the sort action.
        */
-      endGroupDrag(event, ui) {
-        const view = this;
-        Drupal.ckeditor.registerGroupMove(this, ui.item, success => {
-          if (!success) {
-            // Cancel any sorting in the configuration area.
-            view.$el
-              .find('.ckeditor-toolbar-configuration')
-              .find('.ui-sortable')
-              .sortable('cancel');
-          }
-        });
+      endGroupDrag(event) {
+        const $item = $(event.item);
+        Drupal.ckeditor.registerGroupMove(this, $item);
       },
 
       /**
-       * Handles jQuery Sortable start sort of a button.
+       * Handles Sortable start sort of a button.
        *
-       * @param {jQuery.Event} event
-       *   The event triggered on the group drag.
-       * @param {object} ui
-       *   A jQuery.ui.sortable argument that contains information about the
-       *   elements involved in the sort action.
+       * @param {CustomEvent} event
+       *   The event triggered on the button drag.
        */
-      startButtonDrag(event, ui) {
+      startButtonDrag(event) {
         this.$el.find('a:focus').trigger('blur');
 
         // Show the button group names as soon as the user starts dragging.
@@ -188,66 +174,69 @@
       },
 
       /**
-       * Handles jQuery Sortable stop sort of a button.
+       * Handles Sortable stop sort of a button.
        *
-       * @param {jQuery.Event} event
+       * @param {CustomEvent} event
        *   The event triggered on the button drag.
-       * @param {object} ui
-       *   A jQuery.ui.sortable argument that contains information about the
-       *   elements involved in the sort action.
        */
-      endButtonDrag(event, ui) {
-        const view = this;
-        Drupal.ckeditor.registerButtonMove(this, ui.item, success => {
-          if (!success) {
-            // Cancel any sorting in the configuration area.
-            view.$el.find('.ui-sortable').sortable('cancel');
-          }
-          // Refocus the target button so that the user can continue from a known
-          // place.
-          ui.item.find('a').trigger('focus');
+      endButtonDrag(event) {
+        const $item = $(event.item);
+
+        Drupal.ckeditor.registerButtonMove(this, $item, success => {
+          // Refocus the target button so that the user can continue
+          // from a known place.
+          $item.find('a').trigger('focus');
         });
       },
 
       /**
-       * Invokes jQuery.sortable() on new buttons and groups in a CKEditor config.
+       * Invokes Sortable() on new buttons and groups in a CKEditor config.
+       * Array.prototype.forEach is used here because of the lack of support for
+       * NodeList.forEach in older browsers.
        */
       applySorting() {
         // Make the buttons sortable.
-        this.$el
-          .find('.ckeditor-buttons')
-          .not('.ui-sortable')
-          .sortable({
-            // Change this to .ckeditor-toolbar-group-buttons.
-            connectWith: '.ckeditor-buttons',
-            placeholder: 'ckeditor-button-placeholder',
-            forcePlaceholderSize: true,
-            tolerance: 'pointer',
-            cursor: 'move',
-            start: this.startButtonDrag.bind(this),
-            // Sorting within a sortable.
-            stop: this.endButtonDrag.bind(this),
-          })
-          .disableSelection();
+        Array.prototype.forEach.call(
+          this.el.querySelectorAll('.ckeditor-buttons:not(.js-sortable)'),
+          buttons => {
+            buttons.classList.add('js-sortable');
+            Sortable.create(buttons, {
+              ghostClass: 'ckeditor-button-placeholder',
+              group: 'ckeditor-buttons',
+              onStart: this.startButtonDrag.bind(this),
+              onEnd: this.endButtonDrag.bind(this),
+            });
+          },
+        );
 
-        // Add the drag and drop functionality to button groups.
-        this.$el
-          .find('.ckeditor-toolbar-groups')
-          .not('.ui-sortable')
-          .sortable({
-            connectWith: '.ckeditor-toolbar-groups',
-            cancel: '.ckeditor-add-new-group',
-            placeholder: 'ckeditor-toolbar-group-placeholder',
-            forcePlaceholderSize: true,
-            cursor: 'move',
-            stop: this.endGroupDrag.bind(this),
-          });
+        Array.prototype.forEach.call(
+          this.el.querySelectorAll(
+            '.ckeditor-toolbar-groups:not(.js-sortable)',
+          ),
+          buttons => {
+            buttons.classList.add('js-sortable');
+            Sortable.create(buttons, {
+              ghostClass: 'ckeditor-toolbar-group-placeholder',
+              onEnd: this.endGroupDrag.bind(this),
+            });
+          },
+        );
 
-        // Add the drag and drop functionality to buttons.
-        this.$el.find('.ckeditor-multiple-buttons li').draggable({
-          connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons',
-          helper: 'clone',
-        });
+        Array.prototype.forEach.call(
+          this.el.querySelectorAll(
+            '.ckeditor-multiple-buttons:not(.js-sortable)',
+          ),
+          buttons => {
+            buttons.classList.add('js-sortable');
+            Sortable.create(buttons, {
+              group: {
+                name: 'ckeditor-buttons',
+                pull: 'clone',
+              },
+              onEnd: this.endButtonDrag.bind(this),
+            });
+          },
+        );
       },
 
       /**
@@ -312,4 +301,4 @@
       },
     },
   );
-})(Drupal, Backbone, jQuery);
+})(Drupal, Backbone, jQuery, Sortable);
diff --git a/core/modules/ckeditor/js/views/VisualView.js b/core/modules/ckeditor/js/views/VisualView.js
index a5ebbdfc0856..8dfd531eebf1 100644
--- a/core/modules/ckeditor/js/views/VisualView.js
+++ b/core/modules/ckeditor/js/views/VisualView.js
@@ -5,7 +5,7 @@
 * @preserve
 **/
 
-(function (Drupal, Backbone, $) {
+(function (Drupal, Backbone, $, Sortable) {
   Drupal.ckeditor.VisualView = Backbone.View.extend({
     events: {
       'click .ckeditor-toolbar-group-name': 'onGroupNameClick',
@@ -59,53 +59,52 @@
 
       event.preventDefault();
     },
-    endGroupDrag: function endGroupDrag(event, ui) {
-      var view = this;
-      Drupal.ckeditor.registerGroupMove(this, ui.item, function (success) {
-        if (!success) {
-          view.$el.find('.ckeditor-toolbar-configuration').find('.ui-sortable').sortable('cancel');
-        }
-      });
+    endGroupDrag: function endGroupDrag(event) {
+      var $item = $(event.item);
+      Drupal.ckeditor.registerGroupMove(this, $item);
     },
-    startButtonDrag: function startButtonDrag(event, ui) {
+    startButtonDrag: function startButtonDrag(event) {
       this.$el.find('a:focus').trigger('blur');
 
       this.model.set('groupNamesVisible', true);
     },
-    endButtonDrag: function endButtonDrag(event, ui) {
-      var view = this;
-      Drupal.ckeditor.registerButtonMove(this, ui.item, function (success) {
-        if (!success) {
-          view.$el.find('.ui-sortable').sortable('cancel');
-        }
+    endButtonDrag: function endButtonDrag(event) {
+      var $item = $(event.item);
 
-        ui.item.find('a').trigger('focus');
+      Drupal.ckeditor.registerButtonMove(this, $item, function (success) {
+        $item.find('a').trigger('focus');
       });
     },
     applySorting: function applySorting() {
-      this.$el.find('.ckeditor-buttons').not('.ui-sortable').sortable({
-        connectWith: '.ckeditor-buttons',
-        placeholder: 'ckeditor-button-placeholder',
-        forcePlaceholderSize: true,
-        tolerance: 'pointer',
-        cursor: 'move',
-        start: this.startButtonDrag.bind(this),
-
-        stop: this.endButtonDrag.bind(this)
-      }).disableSelection();
-
-      this.$el.find('.ckeditor-toolbar-groups').not('.ui-sortable').sortable({
-        connectWith: '.ckeditor-toolbar-groups',
-        cancel: '.ckeditor-add-new-group',
-        placeholder: 'ckeditor-toolbar-group-placeholder',
-        forcePlaceholderSize: true,
-        cursor: 'move',
-        stop: this.endGroupDrag.bind(this)
+      var _this = this;
+
+      Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-buttons:not(.js-sortable)'), function (buttons) {
+        buttons.classList.add('js-sortable');
+        Sortable.create(buttons, {
+          ghostClass: 'ckeditor-button-placeholder',
+          group: 'ckeditor-buttons',
+          onStart: _this.startButtonDrag.bind(_this),
+          onEnd: _this.endButtonDrag.bind(_this)
+        });
+      });
+
+      Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-toolbar-groups:not(.js-sortable)'), function (buttons) {
+        buttons.classList.add('js-sortable');
+        Sortable.create(buttons, {
+          ghostClass: 'ckeditor-toolbar-group-placeholder',
+          onEnd: _this.endGroupDrag.bind(_this)
+        });
       });
 
-      this.$el.find('.ckeditor-multiple-buttons li').draggable({
-        connectToSortable: '.ckeditor-toolbar-active .ckeditor-buttons',
-        helper: 'clone'
+      Array.prototype.forEach.call(this.el.querySelectorAll('.ckeditor-multiple-buttons:not(.js-sortable)'), function (buttons) {
+        buttons.classList.add('js-sortable');
+        Sortable.create(buttons, {
+          group: {
+            name: 'ckeditor-buttons',
+            pull: 'clone'
+          },
+          onEnd: _this.endButtonDrag.bind(_this)
+        });
       });
     },
     insertPlaceholders: function insertPlaceholders() {
@@ -142,4 +141,4 @@
       });
     }
   });
-})(Drupal, Backbone, jQuery);
\ No newline at end of file
+})(Drupal, Backbone, jQuery, Sortable);
\ No newline at end of file
diff --git a/core/modules/ckeditor/tests/src/Traits/CKEditorAdminSortTrait.php b/core/modules/ckeditor/tests/src/Traits/CKEditorAdminSortTrait.php
new file mode 100644
index 000000000000..adbafc2df6c2
--- /dev/null
+++ b/core/modules/ckeditor/tests/src/Traits/CKEditorAdminSortTrait.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Drupal\Tests\ckeditor\Traits;
+
+use Drupal\FunctionalJavascriptTests\SortableTestTrait;
+
+/**
+ * Provides callback for simulated CKEditor toolbar configuration change.
+ */
+trait CKEditorAdminSortTrait {
+
+  use SortableTestTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function sortableUpdate($item, $from, $to = NULL) {
+    $script = <<<JS
+(function () {
+  // Set backbone model after a DOM change.
+  Drupal.ckeditor.models.Model.set('isDirty', true);
+})()
+
+JS;
+
+    $options = [
+      'script' => $script,
+      'args'   => [],
+    ];
+
+    $this->getSession()->getDriver()->getWebDriverSession()->execute($options);
+  }
+
+}
diff --git a/core/modules/layout_builder/css/layout-builder.css b/core/modules/layout_builder/css/layout-builder.css
index c98b894b093a..cbd03bb31327 100644
--- a/core/modules/layout_builder/css/layout-builder.css
+++ b/core/modules/layout_builder/css/layout-builder.css
@@ -89,6 +89,7 @@
 .layout-builder-block {
   padding: 1.5em;
   cursor: move;
+  background-color: #fff;
 }
 
 .layout-builder-block [tabindex="-1"] {
diff --git a/core/modules/layout_builder/js/layout-builder.es6.js b/core/modules/layout_builder/js/layout-builder.es6.js
index f414cb69f3ed..cf915714b391 100644
--- a/core/modules/layout_builder/js/layout-builder.es6.js
+++ b/core/modules/layout_builder/js/layout-builder.es6.js
@@ -3,7 +3,7 @@
  * Attaches the behaviors for the Layout Builder module.
  */
 
-(($, Drupal) => {
+(($, Drupal, Sortable) => {
   const { ajax, behaviors, debounce, announce, formatPlural } = Drupal;
 
   /*
@@ -100,6 +100,48 @@
     },
   };
 
+  /**
+   * Callback used in {@link Drupal.behaviors.layoutBuilderBlockDrag}.
+   *
+   * @param {HTMLElement} item
+   *   The HTML element representing the repositioned block.
+   * @param {HTMLElement} from
+   *   The HTML element representing the previous parent of item
+   * @param {HTMLElement} to
+   *   The HTML element representing the current parent of item
+   *
+   * @internal This method is a callback for layoutBuilderBlockDrag and is used
+   *  in FunctionalJavascript tests. It may be renamed if the test changes.
+   *  @see https://www.drupal.org/node/3084730
+   */
+  Drupal.layoutBuilderBlockUpdate = function(item, from, to) {
+    const $item = $(item);
+    const $from = $(from);
+
+    // Check if the region from the event and region for the item match.
+    const itemRegion = $item.closest('.js-layout-builder-region');
+    if (to === itemRegion[0]) {
+      // Find the destination delta.
+      const deltaTo = $item.closest('[data-layout-delta]').data('layout-delta');
+      // If the block didn't leave the original delta use the destination.
+      const deltaFrom = $from
+        ? $from.closest('[data-layout-delta]').data('layout-delta')
+        : deltaTo;
+      ajax({
+        url: [
+          $item.closest('[data-layout-update-url]').data('layout-update-url'),
+          deltaFrom,
+          deltaTo,
+          itemRegion.data('region'),
+          $item.data('layout-block-uuid'),
+          $item.prev('[data-layout-block-uuid]').data('layout-block-uuid'),
+        ]
+          .filter(element => element !== undefined)
+          .join('/'),
+      }).execute();
+    }
+  };
+
   /**
    * Provides the ability to drag blocks to new positions in the layout.
    *
@@ -110,52 +152,19 @@
    */
   behaviors.layoutBuilderBlockDrag = {
     attach(context) {
-      $(context)
-        .find('.js-layout-builder-region')
-        .sortable({
-          items: '> .js-layout-builder-block',
-          connectWith: '.js-layout-builder-region',
-          placeholder: 'ui-state-drop',
-
-          /**
-           * Updates the layout with the new position of the block.
-           *
-           * @param {jQuery.Event} event
-           *   The jQuery Event object.
-           * @param {Object} ui
-           *   An object containing information about the item being sorted.
-           */
-          update(event, ui) {
-            // Check if the region from the event and region for the item match.
-            const itemRegion = ui.item.closest('.js-layout-builder-region');
-            if (event.target === itemRegion[0]) {
-              // Find the destination delta.
-              const deltaTo = ui.item
-                .closest('[data-layout-delta]')
-                .data('layout-delta');
-              // If the block didn't leave the original delta use the destination.
-              const deltaFrom = ui.sender
-                ? ui.sender.closest('[data-layout-delta]').data('layout-delta')
-                : deltaTo;
-              ajax({
-                url: [
-                  ui.item
-                    .closest('[data-layout-update-url]')
-                    .data('layout-update-url'),
-                  deltaFrom,
-                  deltaTo,
-                  itemRegion.data('region'),
-                  ui.item.data('layout-block-uuid'),
-                  ui.item
-                    .prev('[data-layout-block-uuid]')
-                    .data('layout-block-uuid'),
-                ]
-                  .filter(element => element !== undefined)
-                  .join('/'),
-              }).execute();
-            }
-          },
-        });
+      const regionSelector = '.js-layout-builder-region';
+      Array.prototype.forEach.call(
+        context.querySelectorAll(regionSelector),
+        region => {
+          Sortable.create(region, {
+            draggable: '.js-layout-builder-block',
+            ghostClass: 'ui-state-drop',
+            group: 'builder-region',
+            onEnd: event =>
+              Drupal.layoutBuilderBlockUpdate(event.item, event.from, event.to),
+          });
+        },
+      );
     },
   };
 
@@ -441,4 +450,4 @@
 
     return `<div class="layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label">${contentPreviewPlaceholderText}</div>`;
   };
-})(jQuery, Drupal);
+})(jQuery, Drupal, Sortable);
diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js
index 88bf8ede2a5c..3068458e72c3 100644
--- a/core/modules/layout_builder/js/layout-builder.js
+++ b/core/modules/layout_builder/js/layout-builder.js
@@ -5,7 +5,7 @@
 * @preserve
 **/
 
-(function ($, Drupal) {
+(function ($, Drupal, Sortable) {
   var ajax = Drupal.ajax,
       behaviors = Drupal.behaviors,
       debounce = Drupal.debounce,
@@ -53,26 +53,35 @@
     }
   };
 
+  Drupal.layoutBuilderBlockUpdate = function (item, from, to) {
+    var $item = $(item);
+    var $from = $(from);
+
+    var itemRegion = $item.closest('.js-layout-builder-region');
+    if (to === itemRegion[0]) {
+      var deltaTo = $item.closest('[data-layout-delta]').data('layout-delta');
+
+      var deltaFrom = $from ? $from.closest('[data-layout-delta]').data('layout-delta') : deltaTo;
+      ajax({
+        url: [$item.closest('[data-layout-update-url]').data('layout-update-url'), deltaFrom, deltaTo, itemRegion.data('region'), $item.data('layout-block-uuid'), $item.prev('[data-layout-block-uuid]').data('layout-block-uuid')].filter(function (element) {
+          return element !== undefined;
+        }).join('/')
+      }).execute();
+    }
+  };
+
   behaviors.layoutBuilderBlockDrag = {
     attach: function attach(context) {
-      $(context).find('.js-layout-builder-region').sortable({
-        items: '> .js-layout-builder-block',
-        connectWith: '.js-layout-builder-region',
-        placeholder: 'ui-state-drop',
-
-        update: function update(event, ui) {
-          var itemRegion = ui.item.closest('.js-layout-builder-region');
-          if (event.target === itemRegion[0]) {
-            var deltaTo = ui.item.closest('[data-layout-delta]').data('layout-delta');
-
-            var deltaFrom = ui.sender ? ui.sender.closest('[data-layout-delta]').data('layout-delta') : deltaTo;
-            ajax({
-              url: [ui.item.closest('[data-layout-update-url]').data('layout-update-url'), deltaFrom, deltaTo, itemRegion.data('region'), ui.item.data('layout-block-uuid'), ui.item.prev('[data-layout-block-uuid]').data('layout-block-uuid')].filter(function (element) {
-                return element !== undefined;
-              }).join('/')
-            }).execute();
+      var regionSelector = '.js-layout-builder-region';
+      Array.prototype.forEach.call(context.querySelectorAll(regionSelector), function (region) {
+        Sortable.create(region, {
+          draggable: '.js-layout-builder-block',
+          ghostClass: 'ui-state-drop',
+          group: 'builder-region',
+          onEnd: function onEnd(event) {
+            return Drupal.layoutBuilderBlockUpdate(event.item, event.from, event.to);
           }
-        }
+        });
       });
     }
   };
@@ -213,4 +222,4 @@
 
     return '<div class="layout-builder-block__content-preview-placeholder-label js-layout-builder-content-preview-placeholder-label">' + contentPreviewPlaceholderText + '</div>';
   };
-})(jQuery, Drupal);
\ No newline at end of file
+})(jQuery, Drupal, Sortable);
\ No newline at end of file
diff --git a/core/modules/layout_builder/layout_builder.libraries.yml b/core/modules/layout_builder/layout_builder.libraries.yml
index d77b6213685a..639c544db7e6 100644
--- a/core/modules/layout_builder/layout_builder.libraries.yml
+++ b/core/modules/layout_builder/layout_builder.libraries.yml
@@ -6,7 +6,7 @@ drupal.layout_builder:
   js:
     js/layout-builder.js: {}
   dependencies:
-    - core/jquery.ui.sortable
+    - core/sortable
     - core/drupal.dialog.off_canvas
     - core/drupal.announce
     - core/drupal.debounce
diff --git a/core/modules/layout_builder/tests/src/FunctionalJavascript/ContentPreviewToggleTest.php b/core/modules/layout_builder/tests/src/FunctionalJavascript/ContentPreviewToggleTest.php
index 46b78b23df9b..ecf96abfc123 100644
--- a/core/modules/layout_builder/tests/src/FunctionalJavascript/ContentPreviewToggleTest.php
+++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/ContentPreviewToggleTest.php
@@ -14,6 +14,7 @@
 class ContentPreviewToggleTest extends WebDriverTestBase {
 
   use ContextualLinkClickTrait;
+  use LayoutBuilderSortTrait;
 
   /**
    * {@inheritdoc}
@@ -91,9 +92,14 @@ public function testContentPreviewToggle() {
     // Confirm repositioning blocks works with content preview disabled.
     $this->assertOrderInPage([$links_field_placeholder_label, $body_field_placeholder_label]);
 
-    $links_block_placeholder_child = $assert_session->elementExists('css', "[data-layout-content-preview-placeholder-label='$links_field_placeholder_label'] div");
-    $body_block_placeholder_child = $assert_session->elementExists('css', "[data-layout-content-preview-placeholder-label='$body_field_placeholder_label'] div");
-    $body_block_placeholder_child->dragTo($links_block_placeholder_child);
+    $region_content = '.layout__region--content';
+    $links_block = "[data-layout-content-preview-placeholder-label='$links_field_placeholder_label']";
+    $body_block = "[data-layout-content-preview-placeholder-label='$body_field_placeholder_label']";
+
+    $assert_session->elementExists('css', $links_block . " div");
+    $assert_session->elementExists('css', $body_block . " div");
+
+    $this->sortableAfter($links_block, $body_block, $region_content);
     $assert_session->assertWaitOnAjaxRequest();
 
     // Check that the drag-triggered rebuild did not trigger content preview.
diff --git a/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderSortTrait.php b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderSortTrait.php
new file mode 100644
index 000000000000..23d4c83bf483
--- /dev/null
+++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderSortTrait.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\Tests\layout_builder\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\SortableTestTrait;
+
+/**
+ * LayoutBuilderSortTrait, provides callback for simulated layout change.
+ */
+trait LayoutBuilderSortTrait {
+
+  use SortableTestTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function sortableUpdate($item, $from, $to = NULL) {
+    // If container does not change, $from and $to are equal.
+    $to = $to ?: $from;
+
+    $script = <<<JS
+(function (src, from, to) {
+  var sourceElement = document.querySelector(src);
+  var fromElement = document.querySelector(from);
+  var toElement = document.querySelector(to);
+
+  Drupal.layoutBuilderBlockUpdate(sourceElement, fromElement, toElement)
+
+})('{$item}', '{$from}', '{$to}')
+
+JS;
+
+    $options = [
+      'script' => $script,
+      'args'   => [],
+    ];
+
+    $this->getSession()->getDriver()->getWebDriverSession()->execute($options);
+  }
+
+}
diff --git a/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderTest.php b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderTest.php
index 4f70581eed41..fa274bc119a5 100644
--- a/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderTest.php
+++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderTest.php
@@ -16,6 +16,7 @@
 class LayoutBuilderTest extends WebDriverTestBase {
 
   use ContextualLinkClickTrait;
+  use LayoutBuilderSortTrait;
 
   /**
    * {@inheritdoc}
@@ -162,12 +163,13 @@ public function testLayoutBuilderUi() {
     $assert_session->elementTextNotContains('css', '.layout__region--second', 'Powered by Drupal');
 
     // Drag the block to a region in different section.
-    $page->find('css', '.layout__region--content .block-system-powered-by-block')->dragTo($page->find('css', '.layout__region--second'));
+    $this->sortableTo('.block-system-powered-by-block', '.layout__region--content', '.layout__region--second');
     $assert_session->assertWaitOnAjaxRequest();
 
     // Ensure the drag succeeded.
     $assert_session->elementExists('css', '.layout__region--second .block-system-powered-by-block');
     $assert_session->elementTextContains('css', '.layout__region--second', 'Powered by Drupal');
+
     $this->assertPageNotReloaded();
 
     // Ensure the dragged block is still in the correct position after reload.
diff --git a/core/modules/media_library/js/media_library.widget.es6.js b/core/modules/media_library/js/media_library.widget.es6.js
index 56b6d8607fbd..82463adcbc80 100644
--- a/core/modules/media_library/js/media_library.widget.es6.js
+++ b/core/modules/media_library/js/media_library.widget.es6.js
@@ -1,7 +1,7 @@
 /**
  * @file media_library.widget.js
  */
-(($, Drupal) => {
+(($, Drupal, Sortable) => {
   /**
    * Allows users to re-order their selection with drag+drop.
    *
@@ -13,15 +13,13 @@
   Drupal.behaviors.MediaLibraryWidgetSortable = {
     attach(context) {
       // Allow media items to be re-sorted with drag+drop in the widget.
-      $('.js-media-library-selection', context)
-        .once('media-library-sortable')
-        .sortable({
-          tolerance: 'pointer',
-          helper: 'clone',
+      const selection = context.querySelectorAll('.js-media-library-selection');
+      selection.forEach(widget => {
+        Sortable.create(widget, {
+          draggable: '.js-media-library-item',
           handle: '.js-media-library-item-preview',
-          stop: ({ target }) => {
-            // Update all the hidden "weight" fields.
-            $(target)
+          onEnd: () => {
+            $(widget)
               .children()
               .each((index, child) => {
                 $(child)
@@ -30,6 +28,7 @@
               });
           },
         });
+      });
     },
   };
 
@@ -100,4 +99,4 @@
         });
     },
   };
-})(jQuery, Drupal);
+})(jQuery, Drupal, Sortable);
diff --git a/core/modules/media_library/js/media_library.widget.js b/core/modules/media_library/js/media_library.widget.js
index 797c45abcb22..a76afcdc4b98 100644
--- a/core/modules/media_library/js/media_library.widget.js
+++ b/core/modules/media_library/js/media_library.widget.js
@@ -5,20 +5,20 @@
 * @preserve
 **/
 
-(function ($, Drupal) {
+(function ($, Drupal, Sortable) {
   Drupal.behaviors.MediaLibraryWidgetSortable = {
     attach: function attach(context) {
-      $('.js-media-library-selection', context).once('media-library-sortable').sortable({
-        tolerance: 'pointer',
-        helper: 'clone',
-        handle: '.js-media-library-item-preview',
-        stop: function stop(_ref) {
-          var target = _ref.target;
-
-          $(target).children().each(function (index, child) {
-            $(child).find('.js-media-library-item-weight').val(index);
-          });
-        }
+      var selection = context.querySelectorAll('.js-media-library-selection');
+      selection.forEach(function (widget) {
+        Sortable.create(widget, {
+          draggable: '.js-media-library-item',
+          handle: '.js-media-library-item-preview',
+          onEnd: function onEnd() {
+            $(widget).children().each(function (index, child) {
+              $(child).find('.js-media-library-item-weight').val(index);
+            });
+          }
+        });
       });
     }
   };
@@ -50,4 +50,4 @@
       });
     }
   };
-})(jQuery, Drupal);
\ No newline at end of file
+})(jQuery, Drupal, Sortable);
\ No newline at end of file
diff --git a/core/modules/media_library/media_library.libraries.yml b/core/modules/media_library/media_library.libraries.yml
index 2eff9bf3ac8f..02ecd2a6e181 100644
--- a/core/modules/media_library/media_library.libraries.yml
+++ b/core/modules/media_library/media_library.libraries.yml
@@ -30,9 +30,9 @@ widget:
     js/media_library.widget.js: {}
   dependencies:
     - core/drupal.dialog.ajax
-    - core/jquery.ui.sortable
     - core/jquery.once
     - media_library/style
+    - core/sortable
 
 ui:
   version: VERSION
diff --git a/core/modules/media_library/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php b/core/modules/media_library/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
index 50ee78b206f7..7c43a4eb89c1 100644
--- a/core/modules/media_library/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
+++ b/core/modules/media_library/tests/src/FunctionalJavascript/CKEditorIntegrationTest.php
@@ -9,6 +9,7 @@
 use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
 use Drupal\media\Entity\Media;
 use Drupal\Tests\ckeditor\Traits\CKEditorTestTrait;
+use Drupal\Tests\ckeditor\Traits\CKEditorAdminSortTrait;
 use Drupal\Tests\media\Traits\MediaTypeCreationTrait;
 use Drupal\Tests\TestFileCreationTrait;
 
@@ -19,6 +20,7 @@
 class CKEditorIntegrationTest extends WebDriverTestBase {
 
   use CKEditorTestTrait;
+  use CKEditorAdminSortTrait;
   use MediaTypeCreationTrait;
   use TestFileCreationTrait;
 
@@ -161,9 +163,12 @@ public function testConfigurationValidation() {
     $this->assertNotEmpty($assert_session->waitForText('sulaco'));
     $page->checkField('roles[authenticated]');
     $page->selectFieldOption('editor[editor]', 'ckeditor');
-    $this->assertNotEmpty($target = $assert_session->waitForElementVisible('css', 'ul.ckeditor-toolbar-group-buttons'));
-    $this->assertNotEmpty($button = $assert_session->elementExists('css', 'li[data-drupal-ckeditor-button-name="DrupalMediaLibrary"]'));
-    $button->dragTo($target);
+
+    $targetSelector = 'ul.ckeditor-toolbar-group-buttons';
+    $buttonSelector = 'li[data-drupal-ckeditor-button-name="DrupalMediaLibrary"]';
+    $this->assertNotEmpty($target = $assert_session->waitForElementVisible('css', $targetSelector));
+    $this->assertNotEmpty($button = $assert_session->elementExists('css', $buttonSelector));
+    $this->sortableTo($buttonSelector, 'ul.ckeditor-available-buttons', $targetSelector);
     $page->pressButton('Save configuration');
     $assert_session->pageTextContains('The Embed media filter must be enabled to use the Insert from Media Library button.');
     $page->checkField('filters[media_embed][status]');
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/SortableTestTrait.php b/core/tests/Drupal/FunctionalJavascriptTests/SortableTestTrait.php
new file mode 100644
index 000000000000..dbaf10c8e358
--- /dev/null
+++ b/core/tests/Drupal/FunctionalJavascriptTests/SortableTestTrait.php
@@ -0,0 +1,96 @@
+<?php
+
+namespace Drupal\FunctionalJavascriptTests;
+
+/**
+ * Provides functions for simulating sort changes.
+ *
+ * Selenium uses ChromeDriver for FunctionalJavascript tests, but it does not
+ * currently support HTML5 drag and drop. These methods manipulate the DOM.
+ * This trait should be deprecated when the Chromium bug is fixed.
+ *
+ * @see https://www.drupal.org/project/drupal/issues/3078152
+ */
+trait SortableTestTrait {
+
+  /**
+   * Define to provide any necessary callback following layout change.
+   *
+   * @param string $item
+   *   The HTML selector for the element to be moved.
+   * @param string $from
+   *   The HTML selector for the previous container element.
+   * @param null|string $to
+   *   The HTML selector for the target container.
+   */
+  abstract protected function sortableUpdate($item, $from, $to = NULL);
+
+  /**
+   * Simulates a drag on an element from one container to another.
+   *
+   * @param string $item
+   *   The HTML selector for the element to be moved.
+   * @param string $from
+   *   The HTML selector for the previous container element.
+   * @param null|string $to
+   *   The HTML selector for the target container.
+   */
+  protected function sortableTo($item, $from, $to) {
+    $item = addslashes($item);
+    $from = addslashes($from);
+    $to   = addslashes($to);
+
+    $script = <<<JS
+(function (src, to) {
+  var sourceElement = document.querySelector(src);
+  var toElement = document.querySelector(to);
+
+  toElement.insertBefore(sourceElement, toElement.firstChild);
+})('{$item}', '{$to}')
+
+JS;
+
+    $options = [
+      'script' => $script,
+      'args'   => [],
+    ];
+
+    $this->getSession()->getDriver()->getWebDriverSession()->execute($options);
+    $this->sortableUpdate($item, $from, $to);
+  }
+
+  /**
+   * Simulates a drag moving an element after its sibling in the same container.
+   *
+   * @param string $item
+   *   The HTML selector for the element to be moved.
+   * @param string $target
+   *   The HTML selector for the sibling element.
+   * @param string $from
+   *   The HTML selector for the element container.
+   */
+  protected function sortableAfter($item, $target, $from) {
+    $item   = addslashes($item);
+    $target = addslashes($target);
+    $from   = addslashes($from);
+
+    $script = <<<JS
+(function (src, to) {
+  var sourceElement = document.querySelector(src);
+  var toElement = document.querySelector(to);
+
+  toElement.insertAdjacentElement('afterend', sourceElement);
+})('{$item}', '{$target}')
+
+JS;
+
+    $options = [
+      'script' => $script,
+      'args'   => [],
+    ];
+
+    $this->getSession()->getDriver()->getWebDriverSession()->execute($options);
+    $this->sortableUpdate($item, $from);
+  }
+
+}
diff --git a/core/themes/stable/css/ckeditor/ckeditor.admin.css b/core/themes/stable/css/ckeditor/ckeditor.admin.css
index 37cd9cc15627..d1eff01f96a4 100644
--- a/core/themes/stable/css/ckeditor/ckeditor.admin.css
+++ b/core/themes/stable/css/ckeditor/ckeditor.admin.css
@@ -228,6 +228,7 @@
   border-bottom-left-radius: 2px;
 }
 .ckeditor-button-placeholder,
+.ckeditor-buttons .ckeditor-button-placeholder a,
 .ckeditor-toolbar-group-placeholder {
   background: #9dcae7;
 }
diff --git a/core/themes/stable/css/layout_builder/layout-builder.css b/core/themes/stable/css/layout_builder/layout-builder.css
index 06b32a0eb463..6ccdf205ad33 100644
--- a/core/themes/stable/css/layout_builder/layout-builder.css
+++ b/core/themes/stable/css/layout_builder/layout-builder.css
@@ -89,6 +89,7 @@
 .layout-builder-block {
   padding: 1.5em;
   cursor: move;
+  background-color: #fff;
 }
 
 .layout-builder-block [tabindex="-1"] {
-- 
GitLab