[JavaScript知识库]vue的小球交换

<template>
  <div class="slide">
    <div class="content" ref="content">
      <div class="line" ref="line"></div>
      <!-- 第一个圆 -->
      <div class="one" ref="one" @touchstart="Fnstart"></div>
      <!-- 第二个圆 -->
      <div class="one ac" ref="two" @touchstart="Fnstart"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {};
  },
  methods: {
    Fnstart(e) {
      this.startX = e.changedTouches[0].pageX - e.target.offsetLeft;
      this.parent = e.target.parentNode;
      this.child = this.parent.children;
      document.ontouchmove = this.Fnmove;
      document.ontouchend = this.FnEnd;
    },
    Fnmove(e) {
      this.X = e.changedTouches[0].pageX - this.startX;
      if (this.X < 0) this.X = 0;
      if (this.X > this.parent.offsetWidth - e.target.offsetWidth)
        this.X = this.parent.offsetWidth - e.target.offsetWidth;
      e.target.style.left = this.X + "px";
      for (var i = 0; i < this.child.length; i++) {
        if (this.child[i].classList.contains("one")) {
          var len = this.child.length - 2;
          if (i == len) {
            this.dis = Math.abs(
              this.child[i].offsetLeft - this.child[i + 1].offsetLeft
            );
            this.$refs["line"].style.width = this.dis + "px";
            if (this.child[i].offsetLeft - this.child[i + 1].offsetLeft > 0) {
              this.$refs["line"].style.left =
                this.child[i + 1].offsetLeft + "px";
            } else {
              this.$refs["line"].style.left = this.child[i].offsetLeft + "px";
            }
          }
        }
      }
    },
    FnEnd() {
      document.ontouchmove = null;
      document.ontouchend = null;
    },
  },
};
</script>
<style lang="less">
body {
  margin: 0;
}
.slide {
  .content {
    position: relative;
    width: 600px;
    height: 3px;
    background: #ebedf0;
    top: 200px;
    left: 0;
    margin: auto;
    .line {
      position: absolute;
      width: 600px;
      height: 5px;
      background: #1989fa;
      top: 0;
      left: 0;
      margin: auto;
    }
    // 第一个圆
    .one {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);
      .tips {
        position: absolute;
        left: 8px;
        margin-top: 50px;
        color: #1989fa;
        font-size: 20px;
      }
    }
    // 第二个圆
    .one {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);
    }
    .one.ac {
      left: 560px;
      background: #fff;
    }
  }
}
</style>