Js writes a method of dragging a container, how can it move relative to the parent container without being disturbed by other elements in the container?

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.


you really don't know what you're going to do if you don't post JS; it looks like you're using vue to manipulate something svg;

to sum up two lessons for dragging:
mousemove events event.clientX and dom.getBoundingClientRect () are perfect matches, basically regardless of the parent node scroll bar;
offsetX is not a standard, and it is also linked to dom, which is not easy to use.
mousemove events are best dynamically tied to document , and the experience will be better.

Menu