Merge branch '3535-group-sync-fix' into development

[bookstack] / resources / js / components / sortable-list.js

diff --git a/resources/js/components/sortable-list.js b/resources/js/components/sortable-list.js
index 6efcb4e84f4841a40b184bbed2aceb01a5f40840..0af0e11c901a5b58d98f4ef7687004c117334e3d 100644 (file)
--- a/resources/js/components/sortable-list.js
+++ b/resources/js/components/sortable-list.js
@@ -2,6 +2,11 @@ import Sortable from "sortablejs";
 
 /**
  * SortableList
+ *
+ * Can have data set on the dragged items by setting a 'data-drag-content' attribute.
+ * This attribute must contain JSON where the keys are content types and the values are
+ * the data to set on the data-transfer.
+ *
  * @extends {Component}
  */
 class SortableList {
@@ -9,9 +14,24 @@ class SortableList {
         this.container = this.$el;
         this.handleSelector = this.$opts.handleSelector;
 
-        new Sortable(this.container, {
+        const sortable = new Sortable(this.container, {
             handle: this.handleSelector,
             animation: 150,
+            onSort: () => {
+                this.$emit('sort', {ids: sortable.toArray()});
+            },
+            setData(dataTransferItem, dragEl) {
+                const jsonContent = dragEl.getAttribute('data-drag-content');
+                if (jsonContent) {
+                    const contentByType = JSON.parse(jsonContent);
+                    for (const [type, content] of Object.entries(contentByType)) {
+                        dataTransferItem.setData(type, content);
+                    }
+                }
+            },
+            revertOnSpill: true,
+            dropBubble: true,
+            dragoverBubble: false,
         });
     }
 }