feat(core): Mixly.Drag添加对移动端触摸手势的支持

common/modules/mixly-modules/common/drag.js

@@ -81,6 +81,17 @@ class Drag {
         this.#addEventListener_();
     }
 
+    #getTouch_(event) {
+        if (event.touches && event.touches.length > 0) {
+            return {
+                clientX: event.touches[0].clientX,
+                clientY: event.touches[0].clientY
+            };
+        } else {
+            return { clientX: 0, clientY: 0 };
+        }
+    };
+
     #addEventListener_() {
         const dragElem = this.$dragElem[0];
         const container = this.$container[0];
@@ -143,6 +154,66 @@ class Drag {
                 document.onmouseup = null;
             };
         };
+
+        dragElem.ontouchstart = (touchEvent) => {
+            touchEvent.preventDefault();
+            this.$container.addClass('dragging');
+            let touch = this.#getTouch_(touchEvent);
+            let dis, prev;
+            if (type === 'h') {
+                dis = touch.clientY;
+                dragElem.top = dragElem.offsetTop;
+            } else {
+                dis = touch.clientX;
+                dragElem.left = dragElem.offsetLeft;
+            }
+            const prevSize = this.size;
+
+            document.ontouchmove = (moveEvent) => {
+                moveEvent.preventDefault();
+                this.runEvent('ondragStart');
+                const current = this.#getTouch_(moveEvent);
+                let iT, maxT, minT = parseInt(min), movement;
+
+                if (type === 'h') {
+                    iT = dragElem.top + (current.clientY - dis);
+                    maxT = container.clientHeight - minT;
+                    movement = current.clientY - dis;
+                } else {
+                    iT = dragElem.left + (current.clientX - dis);
+                    maxT = container.clientWidth - minT;
+                    movement = current.clientX - dis;
+                }
+
+                iT += 1;
+                if (prev === iT) return false;
+                prev = iT;
+
+                if (full[0] && movement < 0 && iT < minT * 0.4) { // 向上或向左
+                    this.changeTo('0%');
+                    this.runEvent('onfull', Drag.Extend.NEGATIVE);
+                } else if (full[1] && movement > 0 && iT > (maxT + minT * 0.6)) { // 向下或向右
+                    this.changeTo('100%');
+                    this.runEvent('onfull', Drag.Extend.POSITIVE);
+                } else if (iT < maxT && iT > minT) { // 中间区域
+                    let shown = this.shown;
+                    this.changeTo(iT);
+                    if (shown !== Drag.Extend.BOTH) {
+                        this.runEvent('exitfull', shown);
+                    }
+                }
+
+                this.runEvent('ondragEnd');
+                return false;
+            };
+
+            document.ontouchend = () => {
+                this.$container.removeClass('dragging');
+                this.prevSize = prevSize;
+                document.ontouchmove = null;
+                document.ontouchend = null;
+            };
+        };
     }
 
     changeTo(part) {