the following code: the coordinate position is event.offsetX, but when moving the div, the mouse position is calculated incorrectly because the toElement points incorrectly, which results in an error in the mouse position calculation.
<svg ref="svg"
:width="panelObj.panelWidth" :height="panelObj.panelHeight"
@mousedown.stop.prevent="selectStar($event)" @mouseup="selectOver()"
@mousemove="moveInPanel($event)" @click.right.prevent="panelRightClick($event)">
<!-- -->
<g v-for="(node,i) in nodes" :key="i">
<foreignObject :x="node.x" :y="node.y" :width="node.width" :height="node.height">
<!-- toElementsvgp -->
<div @mousedown.stop.prevent="choseNode($event,node)" @mouseup.stop.prevent="moveOver()">
<p v-for="(list,i) in node.textList" :key="i">{{list.label}}
</div>
<!-- toElementsvgdiv -->
<!-- <div @mousemove.stop @mousedown.stop.prevent="choseNode($event,node)" @mouseup.stop.prevent="moveOver()">
<p v-for="(list,i) in node.textList" :key="i">{{list.label}}
</div> -->
<!-- toElementsvgp -->
<!-- <div @mousedown.stop.prevent="choseNode($event,node)" @mouseup.stop.prevent="moveOver()">
<p @mousemove.stop v-for="(list,i) in node.textList" :key="i">{{list.label}}
</div> -->
</foreignObject>
</g>
</svg>
if you use calculated coordinates such as event.clientX, this problem will not occur, but you cannot consider the case of scroll bars.