Merge pull request #1583 from adumesny/develop

H5 draggable by actual div handle
gridstack · Jan 23, 2021 · ef332a9 · ef332a9
2 parents c2c066a + c455ef2
commit ef332a9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -51,6 +51,7 @@ Change log
 - fix [1571](https://github.com/gridstack/gridstack.js/issues/1571) don't allow drop when grid is full
 - fix [1570](https://github.com/gridstack/gridstack.js/issues/1570) easier to drag out/in from below
 - fix [1579](https://github.com/gridstack/gridstack.js/issues/1579) `cellHeight()` not updating CSS correctly
+- fix [1581](https://github.com/gridstack/gridstack.js/issues/1581) H5 draggable by actual div handle rather than entire item (let content respond to drag as well)
 
 ## 3.1.4 (2021-1-11)
 

diff --git a/spec/e2e/html/1581_drag_by_header_h5.html b/spec/e2e/html/1581_drag_by_header_h5.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>drag by header</title>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>dragging by header not conflicting with content drag (Sortable.js)</h1>
+    <h3>sortable.js only</h3>
+    <div>
+      <div id="widgetcontent2" class="list-group"> 
+        <div class="list-group-item"> MOVE ME !!!! 11111 11111</div> 
+        <div class="list-group-item"> MOVE ME !!!! 22222 22222</div> 
+        <div class="list-group-item"> MOVE ME !!!! 33333 33333</div> 
+      </div>
+    </div>
+  <br>
+  <div class="grid-stack"></div>
+
+  </div>
+  <script type="text/javascript">
+//Example Widget HTML Data
+var html = '\
+  <div class="grid-stack-item"> \
+    <div class="grid-stack-item-content" > \
+      <div class="widgetheader">drag me here</div> \
+      <div id="gridstackwidgetcontent" class="list-group"> \
+        <div class="list-group-item"> MOVE ME !!!! 11111 11111</div> \
+        <div class="list-group-item"> MOVE ME !!!! 22222 22222</div> \
+        <div class="list-group-item"> MOVE ME !!!! 33333 33333</div> \
+      </div> \
+    </div> \
+  </div>';
+
+  var options = {
+    float: true, 
+    draggable: { handle: '.widgetheader' }
+  };
+  let grid = GridStack.init(options);
+  grid.addWidget(html, {w:2, h:1, x:0, y:0});
+  Sortable.create(gridstackwidgetcontent);
+  Sortable.create(widgetcontent2);
+  </script>
+</body>
+</html>
diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts
@@ -66,8 +66,10 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     super();
     this.el = el;
     this.option = option;
+    // get the element that is actually supposed to be dragged by
+    let className = option.handle.substring(1);
+    this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
-    this._mouseDown = this._mouseDown.bind(this);
     this._dragStart = this._dragStart.bind(this);
     this._drag = this._drag.bind(this);
     this._dragEnd = this._dragEnd.bind(this);
@@ -85,20 +87,18 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
 
   public enable(): void {
     super.enable();
-    this.el.draggable = true;
+    this.dragEl.draggable = true;
+    this.dragEl.addEventListener('dragstart', this._dragStart);
     this.el.classList.remove('ui-draggable-disabled');
     this.el.classList.add('ui-draggable');
-    this.el.addEventListener('mousedown', this._mouseDown);
-    this.el.addEventListener('dragstart', this._dragStart);
   }
 
   public disable(forDestroy = false): void {
     super.disable();
-    this.el.removeAttribute('draggable');
+    this.dragEl.removeAttribute('draggable');
+    this.dragEl.removeEventListener('dragstart', this._dragStart);
     this.el.classList.remove('ui-draggable');
     if (!forDestroy) this.el.classList.add('ui-draggable-disabled');
-    this.el.removeEventListener('mousedown', this._mouseDown);
-    this.el.removeEventListener('dragstart', this._dragStart);
   }
 
   public destroy(): void {
@@ -120,18 +120,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  /** @internal call when mouse goes down before a dragstart happens */
-  private _mouseDown(event: MouseEvent): void {
-    // make sure we are clicking on a drag handle or child of it...
-    let className = this.option.handle.substring(1);
-    let el = event.target as HTMLElement;
-    while (el && !el.classList.contains(className)) { el = el.parentElement; }
-    this.dragEl = el;
-  }
-
   /** @internal */
   private _dragStart(event: DragEvent): void {
-    if (!this.dragEl) { event.preventDefault(); return; }
     DDManager.dragElement = this;
     this.helper = this._createHelper(event);
     this._setupHelperContainmentStyle();
@@ -152,7 +142,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   private _setupDragFollowNodeNotifyStart(ev: Event): DDDraggable {
     this._setupHelperStyle();
     document.addEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
-    this.el.addEventListener('dragend', this._dragEnd);
+    this.dragEl.addEventListener('dragend', this._dragEnd);
     if (this.option.start) {
       this.option.start(ev, this.ui());
     }
@@ -186,7 +176,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
         cancelAnimationFrame(this.paintTimer);
       }
       document.removeEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
-      this.el.removeEventListener('dragend', this._dragEnd);
+      this.dragEl.removeEventListener('dragend', this._dragEnd);
     }
     this.dragging = false;
     this.helper.classList.remove('ui-draggable-dragging');
@@ -203,7 +193,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this.triggerEvent('dragstop', ev);
     delete DDManager.dragElement;
     delete this.helper;
-    delete this.dragEl;
   }
 
   /** @internal create a clone copy (or user defined method) of the original drag item if set */