update checkCardModalV3.tsx

src/ui/Duel/checkCardModalV3.tsx

-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button, Card, Row, Col } from "antd";
+import { Button, Card, Row, Col } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
 import {
@@ -11,6 +11,7 @@ import {
 } from "../../reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
 import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
+import DragModal from "./dragModal";
 
 const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
@@ -31,14 +32,24 @@ const CheckCardModalV3 = () => {
     .concat(selectedOptions)
     .map((option) => option.level2)
     .reduce((sum, current) => sum + current, 0);
+  // Draggable 相关
+  const [draggable, setDraggable] = useState(false);
+  const draggleRef = useRef<HTMLDivElement>(null);
 
+  const onMouseOver = () => {
+    if (draggable) {
+      setDraggable(false);
+    }
+  };
+  const onMouseOut = () => {
+    setDraggable(true);
+  };
   const responseable =
     (overflow
       ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
       : Level1Sum == LevelSum || Level2Sum == LevelSum) &&
     selectedOptions.length <= max &&
     selectedOptions.length >= min;
-
   const onFinish = () => {
     sendSelectCardResponse(
       mustSelectOptions.concat(selectedOptions).map((option) => option.response)
@@ -49,18 +60,27 @@ const CheckCardModalV3 = () => {
   };
 
   return (
-    <Modal
-      title={`请选择卡片，最少${min}张，最多${max}张`}
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: `请选择卡片，最少${min}张，最多${max}张`,
+        open: isOpen,
+        closable: false,
+        footer: (
           <>
-          <Button disabled={!responseable} onClick={onFinish}>
+            <Button
+              disabled={!responseable}
+              onClick={onFinish}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+            >
               finish
             </Button>
           </>
-      }
-      width={800}
+        ),
+        width: 800,
+      }}
+      dragRef={draggleRef}
+      draggable={draggable}
     >
       <CheckCard.Group
         bordered
@@ -87,6 +107,8 @@ const CheckCardModalV3 = () => {
                     />
                   }
                   value={option}
+                  onMouseEnter={onMouseOver}
+                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );
@@ -112,7 +134,7 @@ const CheckCardModalV3 = () => {
           );
         })}
       </Row>
-    </Modal>
+    </DragModal>
   );
 };