Vue实现两个小球，线交叉

html部分

<template>
  <div class="about">
    <div class="box">
      <!-- 默认线 -->
      <div class="Line"></div>
      <!-- 蓝色的线 -->
      <div class="slider-Line" ref="slider-Line"></div>
      <!-- 左边小球 -->
      <div class="ball" @touchstart.prevent="fnstart"></div>
      <!-- 右边小球 -->
      <div class="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- 上面的数字 -->
      <!-- <div class="num" ref="num">{
  
  { num }}</div> -->
    </div>
  </div>
</template>

JavaScript部分

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    fnstart(ev) {
      // 小球
      this.oDiv = ev.target;
      // console.log(this.oDiv.offsetLeft,2222)
      // pagx:鼠标点击的位置到页面最左边的距离            offsetLeft当前元素左边到最大盒子最左边
      this.pageX = ev.cha