js写一个拖拽容器的方法，如何相对父容器移动且不被容器内其他元素干扰？

Question

如下代码，坐标位置采用event.offsetX，但是移动div时因为toElement时而指向错误，导致鼠标位置计算出错。

<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">
      <!-- 鼠标的toElement时而指向svg，时而指向p导致坐标位置算错 -->
      <div @mousedown.stop.prevent="choseNode($event,node)" @mouseup.stop.prevent="moveOver()">
        <p v-for="(list,i) in node.textList" :key="i">{{list.label}}</p>
      </div>
      <!-- 鼠标的toElement指向svg，坐标位置正确，但鼠标在div范围内移动无反应 -->
      <!-- <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}}</p>
      </div> -->
      <!-- 鼠标的toElement指向svg，坐标位置正确，但鼠标在p范围内移动无反应 -->
      <!-- <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}}</p>
      </div> -->
    </foreignObject>
  </g>
</svg>

若采用event.clientX之类的计算坐标，不会出现该问题，但无法考虑出现滚动条的情形。

Answer 1

你不把JS贴出来还真不知道你要做什么; 看起来是用vue在操作svg什么东西;

对于拖拽总结两点经验给你:
mousemove 事件中 event.clientX 和 dom.getBoundingClientRect() 是绝配,基本上不用管父节点滚动条什么的;
offsetX 不是标准,而且还和dom挂钩,不好用;
mousemove 事件最好是动态绑到 document 上,体验会好些.