From c455ef26c4379c62511cca3ef8fffae7da9f4414 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 23 Jan 2021 09:34:11 -0800 Subject: [PATCH] H5 draggable by actual div handle * fix #1581 * set draggabble to actual div handle rather than entire item so content can also respond to dragging. * no longer need to have mousedown to check for clikc on actual drag area... --- doc/CHANGES.md | 1 + spec/e2e/html/1581_drag_by_header_h5.html | 48 +++++++++++++++++++++++ src/h5/dd-draggable.ts | 29 +++++--------- 3 files changed, 58 insertions(+), 20 deletions(-) create mode 100644 spec/e2e/html/1581_drag_by_header_h5.html diff --git a/doc/CHANGES.md b/doc/CHANGES.md index f2a370574..da5780301 100644 --- 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 new file mode 100644 index 000000000..ed29ec3f7 --- /dev/null +++ b/spec/e2e/html/1581_drag_by_header_h5.html @@ -0,0 +1,48 @@ + + + + drag by header + + + + + +
+

dragging by header not conflicting with content drag (Sortable.js)

+

sortable.js only

+
+
+
MOVE ME !!!! 11111 11111
+
MOVE ME !!!! 22222 22222
+
MOVE ME !!!! 33333 33333
+
+
+
+
+ +
+ + + diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts index c873f9c8d..df6ef1e57 100644 --- 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 */