diff --git a/src/libs/browser.js b/src/libs/browser.js index c8ea7a6..27e1f7a 100644 --- a/src/libs/browser.js +++ b/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; diff --git a/src/views/Action/Draggable.js b/src/views/Action/Draggable.js index 5276dc1..a15d022 100644 --- a/src/views/Action/Draggable.js +++ b/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} >