From 621dddd0a956ee00a181d920bb1acff98d456c70 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 23 Jun 2024 17:50:51 -0700 Subject: [PATCH] support for multiple drag targets fix * more for #2709 * corerctly removed prev dragEl code and use list --- doc/CHANGES.md | 1 + src/dd-draggable.ts | 12 +++++------- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 311f8d7ea..ab2dfd243 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -114,6 +114,7 @@ Change log ## 10.2.0-dev (TBD) * fix: [#2683](https://github.com/gridstack/gridstack.js/issues/2683) check for fixed grid maxRow during resize * fix: [#2694](https://github.com/gridstack/gridstack.js/issues/2694) prevent 'r' rotation to items that can't resize (locked, noResize, fixed sizes) +* fix: [#2709](https://github.com/gridstack/gridstack.js/pull/2709) support for multiple drag targets - Thank you [nickfulcher](https://github.com/nickfulcher) ## 10.2.0 (2024-06-02) * feat: [#2682](https://github.com/gridstack/gridstack.js/pull/2682) You can now press 'Esc' to cancel a move|resize, 'r' to rotate during a drag. added `GridStack.rotate()` as well - Thank you John B. for this feature sponsor. diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index a1fea872f..04a3772b1 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -54,8 +54,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt /** @internal */ protected dragElementOriginStyle: Array; /** @internal */ - protected dragEl: HTMLElement; - /** @internal */ protected dragEls: HTMLElement[]; /** @internal true while we are dragging an item around */ protected dragging: boolean; @@ -152,7 +150,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt if (e.button !== 0) return true; // only left click // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user - if (e.target !== this.dragEl && (e.target as HTMLElement).closest(skipMouseDown)) return true; + if (!this.dragEls.find(el => el === e.target) && (e.target as HTMLElement).closest(skipMouseDown)) return true; if (this.option.cancel) { if ((e.target as HTMLElement).closest(this.option.cancel)) return true; } @@ -173,8 +171,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble document.addEventListener('mouseup', this._mouseUp, true); if (isTouch) { - this.dragEl.addEventListener('touchmove', touchmove); - this.dragEl.addEventListener('touchend', touchend); + e.target.addEventListener('touchmove', touchmove); + e.target.addEventListener('touchend', touchend); } e.preventDefault(); @@ -248,8 +246,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt document.removeEventListener('mousemove', this._mouseMove, true); document.removeEventListener('mouseup', this._mouseUp, true); if (isTouch) { - this.dragEl.removeEventListener('touchmove', touchmove, true); - this.dragEl.removeEventListener('touchend', touchend, true); + e.target.removeEventListener('touchmove', touchmove, true); + e.target.removeEventListener('touchend', touchend, true); } if (this.dragging) { delete this.dragging;