drag image composition

src/components/inspect/MarkBody.vue

@@ -154,9 +154,6 @@ export default defineComponent({
         y: e.clientY,
       };
       isGrabbing.value = true;
-
-      document.addEventListener("mousemove", mouseMoveHandler);
-      document.addEventListener("mouseup", mouseUpHandler);
     };
 
     const mouseMoveHandler = function (e: MouseEvent) {
@@ -172,10 +169,6 @@ export default defineComponent({
     const mouseUpHandler = function () {
       isGrabbing.value = false;
     };
-    onUnmounted(() => {
-      document.removeEventListener("mousemove", mouseMoveHandler);
-      document.removeEventListener("mouseup", mouseUpHandler);
-    });
 
     return {
       store,

src/components/mark/MarkBody.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mark-body-container tw-flex-auto">
+  <div class="mark-body-container tw-flex-auto" ref="dragContainer">
     <div v-if="!store.currentTask" class="tw-text-center">暂无评卷任务</div>
     <div v-else :style="{ width: answerPaperScale }">
       <div
@@ -50,6 +50,8 @@ import { groupBy, sortBy } from "lodash";
 // @ts-ignore
 import CustomCursor from "custom-cursor.js";
 
+import { dragImage } from "./use/draggable";
+
 interface SliceImage {
   url: string;
   indexInSliceUrls: number;
@@ -65,6 +67,8 @@ export default defineComponent({
   name: "MarkBody",
   components: { MarkDrawTrack },
   setup() {
+    const { dragContainer } = dragImage();
+
     const { addTimeout } = useTimers();
 
     function hasSliceConfig() {
@@ -457,6 +461,7 @@ export default defineComponent({
     });
 
     return {
+      dragContainer,
       store,
       sliceImagesWithTrackList,
       answerPaperScale,

src/components/mark/use/draggable.ts

@@ -0,0 +1,58 @@
+import { onMounted, onUnmounted, ref } from "vue";
+
+export function dragImage() {
+  // grab moving
+  let pos = { top: 0, left: 0, x: 0, y: 0 };
+  const dragContainer = ref((null as unknown) as HTMLDivElement);
+  // const isGrabbing = ref(false);
+
+  const mouseDownHandler = function (e: MouseEvent) {
+    pos = {
+      // The current scroll
+      left: dragContainer.value.scrollLeft,
+      top: dragContainer.value.scrollTop,
+      // Get the current mouse position
+      x: e.clientX,
+      y: e.clientY,
+    };
+    // isGrabbing.value = true;
+    if (dragContainer.value) {
+      dragContainer.value.style.cursor = "grabbing";
+
+      dragContainer.value.addEventListener("mousemove", mouseMoveHandler);
+      dragContainer.value.addEventListener("mouseup", mouseUpHandler);
+    }
+  };
+
+  const mouseMoveHandler = function (e: MouseEvent) {
+    // if (!isGrabbing.value) return;
+    // How far the mouse has been moved
+    const dx = e.clientX - pos.x;
+    const dy = e.clientY - pos.y;
+
+    // Scroll the element
+    dragContainer.value.scrollTop = pos.top - dy;
+    dragContainer.value.scrollLeft = pos.left - dx;
+  };
+  const mouseUpHandler = function () {
+    // isGrabbing.value = false;
+    if (dragContainer.value) {
+      dragContainer.value.removeEventListener("mousemove", mouseMoveHandler);
+      dragContainer.value.removeEventListener("mouseup", mouseUpHandler);
+      dragContainer.value.style.cursor = "auto";
+    }
+  };
+
+  onMounted(() => {
+    dragContainer.value.addEventListener("mousedown", mouseDownHandler);
+  });
+  onUnmounted(() => {
+    if (dragContainer.value) {
+      dragContainer.value.removeEventListener("mousedown", mouseDownHandler);
+      dragContainer.value.removeEventListener("mousemove", mouseMoveHandler);
+      dragContainer.value.removeEventListener("mouseup", mouseUpHandler);
+    }
+  });
+
+  return { dragContainer };
+}