先用react试了下, 搞了几个小时都没做出来想要的样子, 用vue3半个小时弄好了
react很多时候你觉得这么做没问题, 但是当你写了代码就会出问题, vue很多时候很符合直觉, 就算出错了, 也能根据经验和直觉快速定位
也可能是react用的太少, 毕竟也就不到一个月....

<template> <div ref="startRef" class="box"></div> <div ref="endRef" class="box"></div> <svg class="svg"> <line class="line" :x1="linePosition.x1" :x2="linePosition.x2" :y1="linePosition.y1" :y2="linePosition.y2" ></line> </svg> </template> <script> import { ref, onMounted, reactive, onUpdated, watch, computed } from "vue"; const useDrag = (dom, positionRef) => { let mouseStart = reactive({ x: 0, y: 0 }); const { x, y, width, height } = dom.getBoundingClientRect(); let domStart = reactive({ x, y }); const down = ({ pageX, pageY }) => { console.log("down"); document.addEventListener("mousemove", move); document.addEventListener("mouseup", up); const { x, y } = dom.getBoundingClientRect(); domStart = { x, y }; mouseStart = { x: pageX, y: pageY }; }; const up = () => { console.log("up"); document.removeEventListener("mousemove", move); document.removeEventListener("mouseup", up); }; const move = ({ pageX, pageY }) => { const nx = domStart.x + pageX - mouseStart.x; const ny = domStart.y + pageY - mouseStart.y; dom.style.left = nx + "px"; dom.style.top = ny + "px"; positionRef.value = { x: nx + width / 2, y: ny + height / 2, }; console.log("move"); }; positionRef.value = { x: x + width / 2, y: y + height / 2, }; dom.addEventListener("mousedown", down); }; export default { name: "A", setup() { const startRef = ref(null); const endRef = ref(null); const startPositionRef = ref({ x: 0, y: 0 }); const endPositionRef = ref({ x: 0, y: 0 }); onMounted(() => { useDrag(startRef.value, startPositionRef); useDrag(endRef.value, endPositionRef); }); watch([startPositionRef, endPositionRef], () => { console.log("position changed"); }); const linePosition = computed(() => { return { x1: startPositionRef.value.x, y1: startPositionRef.value.y, x2: endPositionRef.value.x, y2: endPositionRef.value.y, }; }); return { startRef, endRef, linePosition, }; }, }; </script> <style> body, html { width: 100vw; height: 100vh; margin: 0; padding: 0; } .box { width: 30px; height: 30px; border-radius: 50%; position: absolute; cursor: pointer; background: black; user-select: none; } .svg { width: 100vw; height: 100vh; } .line { stroke: deeppink; stroke-width: 2px; } </style>