BUG: #149343 - 主屏容器添加拖拽开关功能

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.addEventListener('touchstart', this)
-          this._dnd.enabled = this['drag-and-drop']
+        this.addEventListener('touchmove', this)
-          if (this._dnd.enabled) {
+        // this.addEventListener('touchcancel', this)
-            this.addEventListener('touchstart', this)
+        this.addEventListener('touchend', this)
-            this.addEventListener('touchmove', this)
-            // this.addEventListener('touchcancel', this)
-            this.addEventListener('touchend', this)
 
-            // this.addEventListener('panstart', this)
+        // this.addEventListener('panstart', this)
-            this.addEventListener('panmove', this)
+        this.addEventListener('panmove', this)
-            this.addEventListener('panend', this)
+        this.addEventListener('panend', this)
 
-            this.addEventListener('holdstart', this)
+        // 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画：
-            this.addEventListener('holdmove', this)
+        // touchend 触发 resetView, mousedown 随后就打断
-            this.addEventListener('holdend', this)
+        // this.addEventListener("mousedown", this);
+        // this.addEventListener("mousemove", this);
+        // this.addEventListener("mouseup", this);
+        this.addEventListener('click', this, true)
+        this.addEventListener('contextmenu', this, true)
 
-            // 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画：
+        this.addEventListener('swipeleft', this.swipe)
-            // touchend 触发 resetView, mousedown 随后就打断
+        this.addEventListener('swiperight', this.swipe)
-            // 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('folder-destroy', this.destroyFolder)
-            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)
-          }
-        }
         // }
         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.holdDistanceX = detail.absolute.dx
-    this.holdDistanceY = clientY - this._dnd.start.clientY
+    this.holdDistanceY = detail.absolute.dy
     if (this._dnd.active) {
       event.preventDefault()
       this._dnd.last.clientX = clientX