IBX-1318: Prevented dragging on child elements

ibexa · Jan 17, 2022 · ddc3af9 · ddc3af9
1 parent bce53cd
commit ddc3af9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js
@@ -354,6 +354,7 @@
             selectorItem: '.ibexa-collapse--field-definition',
             timeoutRemovePlaceholders: TIMEOUT_REMOVE_PLACEHOLDERS,
             selectorPlaceholder: '.ibexa-field-definitions-placeholder',
+            selectorPreventDrag: '.ibexa-collapse__body',
         });
 
         draggable.init();

diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.selection.js
@@ -37,7 +37,11 @@
         (event) => {
             const { nodes } = event.detail;
 
-            nodes.forEach(initField);
+            nodes.forEach((node) => {
+                if (node.querySelector(SELECTOR_OPTIONS_LIST)) {
+                    initField(node);
+                }
+            });
         },
         false
     );

diff --git a/src/bundle/Resources/public/js/scripts/core/draggable.js b/src/bundle/Resources/public/js/scripts/core/draggable.js
@@ -1,5 +1,6 @@
-(function (global, doc, ibexa) {
+(function(global, doc, ibexa) {
     const SELECTOR_PLACEHOLDER = '.ibexa-draggable__placeholder';
+    const SELECTOR_PREVENT_DRAG = '.ibexa-draggable__prevent-drag';
     const TIMEOUT_REMOVE_PLACEHOLDERS = 500;
 
     class Draggable {
@@ -10,6 +11,7 @@
             this.itemsContainer = config.itemsContainer;
             this.selectorItem = config.selectorItem;
             this.selectorPlaceholder = config.selectorPlaceholder || SELECTOR_PLACEHOLDER;
+            this.selectorPreventDrag = config.selectorPreventDrag || SELECTOR_PREVENT_DRAG;
             this.timeoutRemovePlaceholders = config.timeoutRemovePlaceholders || TIMEOUT_REMOVE_PLACEHOLDERS;
 
             this.onDragStart = this.onDragStart.bind(this);
@@ -26,6 +28,16 @@
             item.ondragstart = this.onDragStart;
             item.ondragend = this.onDragEnd;
             item.ondrag = this.removePlaceholderAfterTimeout;
+
+            const preventedNode = item.querySelector(this.selectorPreventDrag);
+
+            if (preventedNode) {
+                preventedNode.draggable = true;
+                preventedNode.ondragstart = (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                };
+            }
         }
 
         onDragStart(event) {