From cb33e4ead0ea4ddaaa48a9494619c4dafa09a9b0 Mon Sep 17 00:00:00 2001 From: luojiahao Date: Wed, 7 Dec 2022 17:00:50 +0800 Subject: [PATCH] =?UTF-8?q?BUG:=20#149343=20-=20=E4=B8=BB=E5=B1=8F?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=B7=BB=E5=8A=A0=E6=8B=96=E6=8B=BD=E5=BC=80?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/grid-container/container.ts | 95 +++++++++------------- 1 file changed, 39 insertions(+), 56 deletions(-) diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts index 7f6cc00..edfdc14 100644 --- a/src/components/grid-container/container.ts +++ b/src/components/grid-container/container.ts @@ -266,58 +266,32 @@ export class GaiaContainer extends StarBaseElement { this.name ) // let dndObserverCallback = () => { - if (this._dnd.enabled !== this['drag-and-drop']) { - this._dnd.enabled = this['drag-and-drop'] - if (this._dnd.enabled) { - this.addEventListener('touchstart', this) - this.addEventListener('touchmove', this) - // this.addEventListener('touchcancel', this) - this.addEventListener('touchend', this) + this.addEventListener('touchstart', this) + this.addEventListener('touchmove', this) + // this.addEventListener('touchcancel', this) + this.addEventListener('touchend', this) - // this.addEventListener('panstart', this) - this.addEventListener('panmove', this) - this.addEventListener('panend', this) + // this.addEventListener('panstart', this) + this.addEventListener('panmove', this) + this.addEventListener('panend', this) - this.addEventListener('holdstart', this) - this.addEventListener('holdmove', this) - this.addEventListener('holdend', this) + // 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画： + // touchend 触发 resetView, mousedown 随后就打断 + // this.addEventListener("mousedown", this); + // this.addEventListener("mousemove", this); + // this.addEventListener("mouseup", this); + this.addEventListener('click', this, true) + this.addEventListener('contextmenu', this, true) - // 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画： - // touchend 触发 resetView, mousedown 随后就打断 - // this.addEventListener("mousedown", this); - // this.addEventListener("mousemove", this); - // this.addEventListener("mouseup", this); - this.addEventListener('click', this, true) - this.addEventListener('contextmenu', this, true) + this.addEventListener('swipeleft', this.swipe) + this.addEventListener('swiperight', this.swipe) - this.addEventListener('swipeleft', this.swipe) - this.addEventListener('swiperight', this.swipe) - - this.addEventListener('folder-destroy', this.destroyFolder) - } else { - this.cancelDrag() - this.removeEventListener('touchstart', this) - this.removeEventListener('touchmove', this) - this.removeEventListener('touchcancel', this) - this.removeEventListener('touchend', this) - // this.removeEventListener("mousedown", this); - // this.removeEventListener("mousemove", this); - // this.removeEventListener("mouseup", this); - this.removeEventListener('click', this, true) - this.removeEventListener('contextmenu', this, true) - - this.removeEventListener('swipeleft', this.swipe) - this.removeEventListener('swiperight', this.swipe) - this.removeEventListener('folder-destroy', this.destroyFolder) - } - } + this.addEventListener('folder-destroy', this.destroyFolder) // } window.addEventListener('resize', () => { this.updateComplete.then(this.changeLayout) }) - // this.dndObserver = new MutationObserver(dndObserverCallback) - // dndObserverCallback() this.addPage() this.updateComplete.then(() => { this.ready = true @@ -523,13 +497,11 @@ export class GaiaContainer extends StarBaseElement { if (value) { this.status |= STATUS.SORT this.gestureDetector.setOption('holdThreshold', 120) - this.setAttribute('sort-mode', '') this.updateComplete.then(this.addTailPage) this.setAttribute('sort-mode', '') } else { this.status &= ~STATUS.SORT this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT) - this.removeAttribute('sort-mode') this.removeTailPage() this.removeAttribute('sort-mode') } @@ -720,7 +692,25 @@ export class GaiaContainer extends StarBaseElement { return length ? [...this._children][length - 1].element : null } - @property({type: Boolean}) 'drag-and-drop'!: boolean + @property({type: Boolean}) + get 'drag-and-drop'() { + return this._dnd.enabled + } + + set 'drag-and-drop'(value) { + if (this._dnd.enabled !== value) { + this._dnd.enabled = value + if (value) { + this.addEventListener('holdstart', this) + this.addEventListener('holdmove', this) + this.addEventListener('holdend', this) + } else { + this.removeEventListener('holdstart', this) + this.removeEventListener('holdmove', this) + this.removeEventListener('holdend', this) + } + } + } get dragAndDropTimeout() { return this._dnd.delay @@ -1623,13 +1613,6 @@ export class GaiaContainer extends StarBaseElement { composed: true, }) ) - } else if (this._dnd.isSpanning) { - this.dispatchEvent( - new CustomEvent('cross-field', { - detail: child, - composed: true, - }) - ) } } @@ -2384,7 +2367,7 @@ export class GaiaContainer extends StarBaseElement { this.timer = undefined this.slideType = '' } - if (this._dnd.active || this._dnd.timeout) { + if (this._dnd.active || this._dnd.timeout || !this['drag-and-drop']) { // this.cancelDrag(); return @@ -2449,8 +2432,8 @@ export class GaiaContainer extends StarBaseElement { const detail = (event as CustomEvent).detail const clientX = detail.position.clientX const clientY = detail.position.clientY - this.holdDistanceX = clientX - this._dnd.start.clientX - this.holdDistanceY = clientY - this._dnd.start.clientY + this.holdDistanceX = detail.absolute.dx + this.holdDistanceY = detail.absolute.dy if (this._dnd.active) { event.preventDefault() this._dnd.last.clientX = clientX