From 39ed5ed86f1543da127bd56421cdc24d06be9bad Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sat, 24 Jun 2023 20:20:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=96=E6=8B=BD=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Draggable.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/Draggable.js b/components/Draggable.js
index f0710e41..397d584d 100644
--- a/components/Draggable.js
+++ b/components/Draggable.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import { useRef, useEffect } from 'react'
 /**
  * 可拖拽组件
  */
 
 export const Draggable = (props) => {
   const { children } = props
-  const draggableRef = React.useRef(null)
-  const rafRef = React.useRef(null)
+  const draggableRef = useRef(null)
+  const rafRef = useRef(null)
   let currentObj, offsetX, offsetY
 
-  React.useEffect(() => {
+  useEffect(() => {
     const draggableElements = document.getElementsByClassName('draggable')
 
     // 标准化鼠标事件对象
@@ -51,6 +51,7 @@ export const Draggable = (props) => {
       }
       if (currentObj) {
         if (event.type === 'touchstart') {
+          event.preventDefault() // 阻止默认的滚动行为
           document.documentElement.style.overflow = 'hidden' // 防止页面一起滚动
         }
         offsetX = event.mx - currentObj.offsetLeft
@@ -70,7 +71,7 @@ export const Draggable = (props) => {
 
     const stop = (event) => {
       event = e(event)
-      document.documentElement.style.overflow = 'auto'
+      document.documentElement.style.overflow = 'auto' // 恢复默认的滚动行为
       cancelAnimationFrame(rafRef.current)
       currentObj = document.ontouchmove = document.ontouchend = document.onmousemove = document.onmouseup = null
     }