添加拖动

package-lock.json

@@ -19,6 +19,7 @@
         "eventemitter3": "^5.0.1",
         "howler": "^2.2.3",
         "html2canvas": "^1.4.1",
+        "moveable": "^0.52.0",
         "naive-ui": "^2.34.4",
         "numeral": "^2.0.6",
         "pinia": "^2.0.36",
@@ -1815,6 +1816,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cfcs/core": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/@cfcs/core/-/core-0.0.6.tgz",
+      "integrity": "sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==",
+      "dependencies": {
+        "@egjs/component": "^3.0.2"
+      }
+    },
     "node_modules/@css-render/plugin-bem": {
       "version": "0.15.12",
       "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.12.tgz",
@@ -1831,6 +1840,34 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/@daybrush/utils": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmmirror.com/@daybrush/utils/-/utils-1.13.0.tgz",
+      "integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ=="
+    },
+    "node_modules/@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "node_modules/@egjs/children-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+      "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
+      "dependencies": {
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "node_modules/@egjs/component": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/@egjs/component/-/component-3.0.5.tgz",
+      "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w=="
+    },
+    "node_modules/@egjs/list-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@egjs/list-differ/-/list-differ-1.0.1.tgz",
+      "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg=="
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
@@ -2410,6 +2447,31 @@
         }
       }
     },
+    "node_modules/@scena/dragscroll": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@scena/dragscroll/-/dragscroll-1.4.0.tgz",
+      "integrity": "sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.6.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
+    "node_modules/@scena/event-emitter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
+      "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.1.1"
+      }
+    },
+    "node_modules/@scena/matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@scena/matrix/-/matrix-1.1.1.tgz",
+      "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.4.0"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.40.2",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.40.2.tgz",
@@ -3856,6 +3918,49 @@
         "@xmldom/xmldom": "^0.8.6"
       }
     },
+    "node_modules/croact": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/croact/-/croact-1.0.4.tgz",
+      "integrity": "sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "node_modules/croact-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmmirror.com/croact-css-styled/-/croact-css-styled-1.1.9.tgz",
+      "integrity": "sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "node_modules/croact-moveable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/croact-moveable/-/croact-moveable-0.8.0.tgz",
+      "integrity": "sha512-ZjHAskafO9BC8zeIPvZKRO4ZtbEeMg92WQPYcWI2clb7Z5s/wXq5ySfqMg7uqBvZQzG/570VcCfg3j32mOIWbA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "croact-css-styled": "^1.1.9",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.0",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-moveable": "~0.55.0"
+      },
+      "peerDependencies": {
+        "croact": "^1.0.4"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3895,6 +4000,23 @@
         "csstype": "~3.0.5"
       }
     },
+    "node_modules/css-styled": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/css-styled/-/css-styled-1.0.8.tgz",
+      "integrity": "sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0"
+      }
+    },
+    "node_modules/css-to-mat": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/css-to-mat/-/css-to-mat-1.1.1.tgz",
+      "integrity": "sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/matrix": "^1.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -4834,6 +4956,11 @@
         "node": "*"
       }
     },
+    "node_modules/framework-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/framework-utils/-/framework-utils-1.1.0.tgz",
+      "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4868,6 +4995,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/gesto": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmmirror.com/gesto/-/gesto-1.19.2.tgz",
+      "integrity": "sha512-i6OGsrR2GN7n2dQaUhY+LZ+AAZgBNg5/1kest/ST5VRRflfVl5bSfvOkJMDmKEUrGbKF6eIDkFz/DnCXJD4UMA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -5748,6 +5884,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
+    "node_modules/keycon": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/keycon/-/keycon-1.4.0.tgz",
+      "integrity": "sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==",
+      "dependencies": {
+        "@cfcs/core": "^0.0.6",
+        "@daybrush/utils": "^1.7.1",
+        "@scena/event-emitter": "^1.0.2",
+        "keycode": "^2.2.0"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -6342,6 +6494,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/moveable": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmmirror.com/moveable/-/moveable-0.52.0.tgz",
+      "integrity": "sha512-rSstov/EeYyzNsIofUa6G+GxEH+AlvWMJQH6EbmuQPZ/a2Y49T5iKXMmwCYuq9N2q46Ahyhv4hGziL+Paz3lkw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.5",
+        "croact": "^1.0.4",
+        "croact-moveable": "~0.8.0",
+        "react-moveable": "~0.55.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -6808,6 +6972,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/overlap-area": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/overlap-area/-/overlap-area-1.1.0.tgz",
+      "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.7.1"
+      }
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/p-finally/-/p-finally-1.0.0.tgz",
@@ -7267,6 +7439,43 @@
       "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
       "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
     },
+    "node_modules/react-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmmirror.com/react-css-styled/-/react-css-styled-1.1.9.tgz",
+      "integrity": "sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==",
+      "dependencies": {
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "node_modules/react-moveable": {
+      "version": "0.55.0",
+      "resolved": "https://registry.npmmirror.com/react-moveable/-/react-moveable-0.55.0.tgz",
+      "integrity": "sha512-k2tyuD7wtKL3E0j/zsFm8x1rKFDMMtQSrUxTka9C3MDm8Hw5BKFZWOCWiRtCIUdWyCCOxDuzfDB3cd1mCq3DNA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.0",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-selecto": "^1.25.0"
+      }
+    },
+    "node_modules/react-selecto": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmmirror.com/react-selecto/-/react-selecto-1.26.1.tgz",
+      "integrity": "sha512-zxK2S8QX+uozGuDvJraEc0K1J0iQ0U3907cf7yvxkhb+JLGiqO5y4pEeti1ysiCGdQzPio2RhGWT/w5o7Tiyug==",
+      "dependencies": {
+        "selecto": "~1.26.1"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -7568,6 +7777,23 @@
       "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz",
       "integrity": "sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw=="
     },
+    "node_modules/selecto": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmmirror.com/selecto/-/selecto-1.26.1.tgz",
+      "integrity": "sha512-4nqvJ9snUHLUYpzm4MAe+3lVpMT68h0gOWqSsEiY9rvLyVGPk0BxVZDBaoxI5jGrdulUVaC5b2z6OSfxy+nkNQ==",
+      "dependencies": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/children-differ": "^1.0.1",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "css-styled": "^1.0.8",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.1",
+        "keycon": "^1.2.0",
+        "overlap-area": "^1.1.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",
@@ -10388,6 +10614,14 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@cfcs/core": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmmirror.com/@cfcs/core/-/core-0.0.6.tgz",
+      "integrity": "sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==",
+      "requires": {
+        "@egjs/component": "^3.0.2"
+      }
+    },
     "@css-render/plugin-bem": {
       "version": "0.15.12",
       "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.12.tgz",
@@ -10398,6 +10632,34 @@
       "resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.12.tgz",
       "integrity": "sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg=="
     },
+    "@daybrush/utils": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmmirror.com/@daybrush/utils/-/utils-1.13.0.tgz",
+      "integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ=="
+    },
+    "@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmmirror.com/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "@egjs/children-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+      "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
+      "requires": {
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "@egjs/component": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/@egjs/component/-/component-3.0.5.tgz",
+      "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w=="
+    },
+    "@egjs/list-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@egjs/list-differ/-/list-differ-1.0.1.tgz",
+      "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg=="
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
@@ -10727,6 +10989,31 @@
         "picomatch": "^2.3.1"
       }
     },
+    "@scena/dragscroll": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@scena/dragscroll/-/dragscroll-1.4.0.tgz",
+      "integrity": "sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==",
+      "requires": {
+        "@daybrush/utils": "^1.6.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
+    "@scena/event-emitter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
+      "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
+      "requires": {
+        "@daybrush/utils": "^1.1.1"
+      }
+    },
+    "@scena/matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@scena/matrix/-/matrix-1.1.1.tgz",
+      "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
+      "requires": {
+        "@daybrush/utils": "^1.4.0"
+      }
+    },
     "@types/eslint": {
       "version": "8.40.2",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.40.2.tgz",
@@ -11906,6 +12193,46 @@
         "@xmldom/xmldom": "^0.8.6"
       }
     },
+    "croact": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/croact/-/croact-1.0.4.tgz",
+      "integrity": "sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "croact-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmmirror.com/croact-css-styled/-/croact-css-styled-1.1.9.tgz",
+      "integrity": "sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "croact-moveable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/croact-moveable/-/croact-moveable-0.8.0.tgz",
+      "integrity": "sha512-ZjHAskafO9BC8zeIPvZKRO4ZtbEeMg92WQPYcWI2clb7Z5s/wXq5ySfqMg7uqBvZQzG/570VcCfg3j32mOIWbA==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "croact-css-styled": "^1.1.9",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.0",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-moveable": "~0.55.0"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -11939,6 +12266,23 @@
         "csstype": "~3.0.5"
       }
     },
+    "css-styled": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/css-styled/-/css-styled-1.0.8.tgz",
+      "integrity": "sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0"
+      }
+    },
+    "css-to-mat": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/css-to-mat/-/css-to-mat-1.1.1.tgz",
+      "integrity": "sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/matrix": "^1.0.0"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@@ -12680,6 +13024,11 @@
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
+    "framework-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/framework-utils/-/framework-utils-1.1.0.tgz",
+      "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -12704,6 +13053,15 @@
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
+    "gesto": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmmirror.com/gesto/-/gesto-1.19.2.tgz",
+      "integrity": "sha512-i6OGsrR2GN7n2dQaUhY+LZ+AAZgBNg5/1kest/ST5VRRflfVl5bSfvOkJMDmKEUrGbKF6eIDkFz/DnCXJD4UMA==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -13388,6 +13746,22 @@
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
+    "keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
+    "keycon": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/keycon/-/keycon-1.4.0.tgz",
+      "integrity": "sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==",
+      "requires": {
+        "@cfcs/core": "^0.0.6",
+        "@daybrush/utils": "^1.7.1",
+        "@scena/event-emitter": "^1.0.2",
+        "keycode": "^2.2.0"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -13862,6 +14236,18 @@
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true
     },
+    "moveable": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmmirror.com/moveable/-/moveable-0.52.0.tgz",
+      "integrity": "sha512-rSstov/EeYyzNsIofUa6G+GxEH+AlvWMJQH6EbmuQPZ/a2Y49T5iKXMmwCYuq9N2q46Ahyhv4hGziL+Paz3lkw==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@scena/event-emitter": "^1.0.5",
+        "croact": "^1.0.4",
+        "croact-moveable": "~0.8.0",
+        "react-moveable": "~0.55.0"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -14245,6 +14631,14 @@
       "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
       "dev": true
     },
+    "overlap-area": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/overlap-area/-/overlap-area-1.1.0.tgz",
+      "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
+      "requires": {
+        "@daybrush/utils": "^1.7.1"
+      }
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/p-finally/-/p-finally-1.0.0.tgz",
@@ -14585,6 +14979,43 @@
       "resolved": "https://registry.npmmirror.com/rangetouch/-/rangetouch-2.0.1.tgz",
       "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
     },
+    "react-css-styled": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmmirror.com/react-css-styled/-/react-css-styled-1.1.9.tgz",
+      "integrity": "sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==",
+      "requires": {
+        "css-styled": "~1.0.8",
+        "framework-utils": "^1.1.0"
+      }
+    },
+    "react-moveable": {
+      "version": "0.55.0",
+      "resolved": "https://registry.npmmirror.com/react-moveable/-/react-moveable-0.55.0.tgz",
+      "integrity": "sha512-k2tyuD7wtKL3E0j/zsFm8x1rKFDMMtQSrUxTka9C3MDm8Hw5BKFZWOCWiRtCIUdWyCCOxDuzfDB3cd1mCq3DNA==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@egjs/list-differ": "^1.0.0",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.0",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.1.9",
+        "react-selecto": "^1.25.0"
+      }
+    },
+    "react-selecto": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmmirror.com/react-selecto/-/react-selecto-1.26.1.tgz",
+      "integrity": "sha512-zxK2S8QX+uozGuDvJraEc0K1J0iQ0U3907cf7yvxkhb+JLGiqO5y4pEeti1ysiCGdQzPio2RhGWT/w5o7Tiyug==",
+      "requires": {
+        "selecto": "~1.26.1"
+      }
+    },
     "readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -14831,6 +15262,23 @@
       "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz",
       "integrity": "sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw=="
     },
+    "selecto": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmmirror.com/selecto/-/selecto-1.26.1.tgz",
+      "integrity": "sha512-4nqvJ9snUHLUYpzm4MAe+3lVpMT68h0gOWqSsEiY9rvLyVGPk0BxVZDBaoxI5jGrdulUVaC5b2z6OSfxy+nkNQ==",
+      "requires": {
+        "@daybrush/utils": "^1.13.0",
+        "@egjs/children-differ": "^1.0.1",
+        "@scena/dragscroll": "^1.4.0",
+        "@scena/event-emitter": "^1.0.5",
+        "css-styled": "^1.0.8",
+        "css-to-mat": "^1.1.1",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.19.1",
+        "keycon": "^1.2.0",
+        "overlap-area": "^1.1.0"
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "eventemitter3": "^5.0.1",
     "howler": "^2.2.3",
     "html2canvas": "^1.4.1",
+    "moveable": "^0.52.0",
     "naive-ui": "^2.34.4",
     "numeral": "^2.0.6",
     "pinia": "^2.0.36",

src/views/knowledge-library/index.module.less

@@ -26,10 +26,20 @@
   .iconExamQuestion {
     position: fixed;
     right: 0;
-    bottom: 20vh;
+    top: calc(var(--header-height) + 35px);
     z-index: 99;
     width: 66px;
     height: 66px;
+
+  }
+}
+
+:global {
+  .moveable-control-box {
+    .moveable-line {
+      width: 0 !important;
+      height: 0 !important;
+    }
   }
 }
 
@@ -173,4 +183,4 @@
     width: 100%;
     max-height: 154px;
   }
-}
+}

src/views/knowledge-library/index.tsx

@@ -16,7 +16,7 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const route = useRoute();
-    const showGuide = ref()
+    const showGuide = ref();
     const forms = reactive({
       cid: route.query.cid,
       list: [] as any,
@@ -39,7 +39,7 @@ export default defineComponent({
           }
         );
         forms.list = data;
-        showGuide.value = true
+        showGuide.value = true;
       } catch {
         //
       }

src/views/knowledge-library/unit-detail.tsx

@@ -4,6 +4,7 @@ import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { useRoute, useRouter } from 'vue-router';
 import request from '@/helpers/request';
+import Moveable from 'moveable';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
 import iconExamQuestion from './images/icon-exam-question.png';
 import MEmpty from '@/components/m-empty';
@@ -62,6 +63,79 @@ export default defineComponent({
       }
     };
 
+    const __initMove = () => {
+      const moveable = new Moveable(document.body, {
+        target: document.querySelector('#iconExamQuestion') as any,
+        // If the container is null, the position is fixed. (default: parentElement(document.body))
+        container: document.body,
+        draggable: true,
+        resizable: false,
+        scalable: false,
+        rotatable: false,
+        warpable: false,
+        // Enabling pinchable lets you use events that
+        // can be used in draggable, resizable, scalable, and rotateable.
+        pinchable: false, // ["resizable", "scalable", "rotatable"]
+        origin: false,
+        keepRatio: false,
+        // Resize, Scale Events at edges.
+        edge: false,
+        throttleDrag: 0,
+        throttleResize: 0,
+        throttleScale: 0,
+        throttleRotate: 0
+      });
+
+      moveable
+        .on('dragStart', ({ target, clientX, clientY }) => {
+          // console.log('onDragStart', target);
+        })
+        .on(
+          'drag',
+          ({
+            target,
+            transform,
+            left,
+            top,
+            right,
+            bottom,
+            beforeDelta,
+            beforeDist,
+            delta,
+            dist,
+            clientX,
+            clientY
+          }) => {
+            // console.log({ left, top, right, bottom });
+            // console.log({ clientX, clientY });
+            // console.log(target.clientWidth, target.clientHeight);
+            // console.log(document.body.clientWidth, document.body.clientHeight);
+            const docWidth = document.body.clientWidth;
+            const docHeight = document.body.clientHeight;
+            if (left <= 0) {
+              target!.style.left = `${0}px`;
+            } else if (docWidth - target.clientWidth / 1.6 <= clientX) {
+              target!.style.left = `${docWidth - target.clientWidth}px`;
+            } else {
+              target!.style.left = `${left}px`;
+            }
+            if (top <= 0) {
+              target!.style.top = `${0}px`;
+            } else if (docHeight - target.clientHeight / 1.6 <= clientY) {
+              target!.style.top = `${docHeight - target.clientHeight}px`;
+            } else {
+              target!.style.top = `${top}px`;
+            }
+
+            // console.log("onDrag translate", dist);
+            // target!.style.transform = transform;
+          }
+        )
+        .on('dragEnd', ({ target, isDrag, clientX, clientY }) => {
+          // console.log('onDragEnd', target, isDrag);
+        });
+    };
+
     onMounted(() => {
       useEventListener(document, 'scroll', () => {
         const { y } = useWindowScroll();
@@ -74,6 +148,8 @@ export default defineComponent({
         }
       });
 
+      __initMove();
+
       getList();
     });
     return () => (
@@ -83,7 +159,7 @@ export default defineComponent({
             border={false}
             background={forms.background}
             color={forms.color}>
-            {{
+            {/* {{
               right: () => (
                 <div
                   class={styles.wroingBtn}
@@ -91,7 +167,7 @@ export default defineComponent({
                   <i class={styles.iconWroing}></i>错题本
                 </div>
               )
-            }}
+            }} */}
           </MHeader>
         </MSticky>
 
@@ -109,6 +185,7 @@ export default defineComponent({
         </div>
 
         <img
+          id="iconExamQuestion"
           src={iconExamQuestion}
           class={styles.iconExamQuestion}
           onClick={onGotoModel}