--- /dev/null
+(($, { ajax, behaviors }) => {
+ behaviors.layoutBuilder = {
+ attach(context) {
+ $(context).find('.layout-builder--layout__region').sortable({
+ items: '> .draggable',
+ connectWith: '.layout-builder--layout__region',
+
+ /**
+ * 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);