fix mobile bug

src/libs/browser.js

@@ -17,3 +17,4 @@ export const client = process.env.REACT_APP_CLIENT;
 export const isExt = CLIENT_EXTS.includes(client);
 export const isGm = client === CLIENT_USERSCRIPT;
 export const isWeb = client === CLIENT_WEB;
+export const isMobile = "ontouchstart" in document.documentElement;

src/views/Action/Draggable.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { limitNumber } from "../../libs/utils";
+import { isMobile } from "../../libs/browser";
 
 export default function Draggable(props) {
   const [origin, setOrigin] = useState(null);
@@ -9,21 +10,23 @@ export default function Draggable(props) {
   });
 
   const handlePointerDown = (e) => {
-    e.target.setPointerCapture(e.pointerId);
+    !isMobile && e.target.setPointerCapture(e.pointerId);
     props?.onStart();
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     setOrigin({
       x: position.x,
       y: position.y,
-      px: e.clientX,
-      py: e.clientY,
+      px: clientX,
+      py: clientY,
     });
   };
 
   const handlePointerMove = (e) => {
     props?.onMove();
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     if (origin) {
-      const dx = e.clientX - origin.px;
-      const dy = e.clientY - origin.py;
+      const dx = clientX - origin.px;
+      const dy = clientY - origin.py;
       let x = origin.x + dx;
       let y = origin.y + dy;
       const { w, h } = props.windowSize;
@@ -41,6 +44,18 @@ export default function Draggable(props) {
     e.stopPropagation();
   };
 
+  const touchProps = isMobile
+    ? {
+        onTouchStart: handlePointerDown,
+        onTouchMove: handlePointerMove,
+        onTouchEnd: handlePointerUp,
+      }
+    : {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+      };
+
   useEffect(() => {
     const { w, h } = props.windowSize;
     setPosition(({ x, y }) => ({
@@ -60,9 +75,10 @@ export default function Draggable(props) {
       onClick={handleClick}
     >
       <div
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
+        style={{
+          touchAction: "none",
+        }}
+        {...touchProps}
       >
         {props.handler}
       </div>