Updated Drupal to 8.6. This goes with the following updates because it's possible...
[yaffs-website] / web / core / modules / layout_builder / js / layout-builder.es6.js
index cdb5bee76299a4604b55a404a6856e78a554cfee..f8f7b0be4685f5c018381ae8ae3cd9e6fd704d17 100644 (file)
@@ -1,41 +1,54 @@
 (($, { ajax, behaviors }) => {
   behaviors.layoutBuilder = {
     attach(context) {
-      $(context).find('.layout-builder--layout__region').sortable({
-        items: '> .draggable',
-        connectWith: '.layout-builder--layout__region',
+      $(context)
+        .find('.layout-builder--layout__region')
+        .sortable({
+          items: '> .draggable',
+          connectWith: '.layout-builder--layout__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('.layout-builder--layout__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();
-          }
-        },
-      });
+          /**
+           * 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(
+              '.layout-builder--layout__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();
+            }
+          },
+        });
     },
   };
 })(jQuery, Drupal);