排序左右移动

 <div style="display:flex;align-items: center;">
          <span>试验方向顺序（可点击箭头移动）：</span>
          <div>
            <div>
              <div id="list-container" style="display: flex;align-items: center;">
                <div class="list-top">{{ boxArr[0] }}</div>
                <div class="line"></div>
                <div class="list-top">{{ boxArr[1] }}</div>
                <div class="line"></div>
                <div class="list-top">{{ boxArr[2] }}</div>
              </div>
            </div>
            <div style="display:flex;margin-left: 15px;">
              <div class="list-item"><i class="el-icon-right" @click="sort(1)"></i></div>
              <div class="list-item" style="display:flex;align-items: center;margin-left: 20px;"> <i @click="sort(2)"
                  class="el-icon-back"></i><i style="margin-left: 10px;" class="el-icon-right" @click="sort(3)"></i></div>
              <div class="list-item"><i class="el-icon-back" @click="sort(4)" style="margin-left: 20px;"></i></div>
            </div>
          </div>
        </div>
         boxArr: ['x向', 'y向', 'z向'],
         methods: {
    sort(index) {
      if (index === 1) {
        // 点击右箭头，第一个圆圈移到第二个
        if (this.boxArr.length > 1) {
          const first = this.boxArr.shift();
          this.boxArr.splice(1, 0, first);
        }
      } else if (index === 2) {
        if (this.boxArr.length > 1) {
          const first = this.boxArr.shift();
          this.boxArr.push(first);
        }
      } else if (index === 3) {
        if (this.boxArr.length > 1) {
          const last = this.boxArr.pop();
          this.boxArr.splice(-2, 0, last);
        }
      } else if (index === 4) {
        // 点击左箭头，最后一个圆圈移到第二个
        if (this.boxArr.length > 1) {
          const last = this.boxArr.pop();
          const second = this.boxArr.splice(1, 1, last)[0];
          this.boxArr.push(second);
        }
      }
    },
    }
    <style lang="scss" scoped>
.loading-tip {
  width: 220px;
  height: 30px;
  color: white;
  line-height: 30px;
  border-radius: 6px;
  text-align: center;
  margin: 10px 0 0 100px;
  background-color: #314155;
}

.list-item {
  margin-right: 145px;
  text-align: center;
  cursor: pointer;
}

.list-top {
  border-radius: 50%;
  padding: 10px 10px;
  border: 1px solid black;
}

.line {
  width: 150px;
  height: 1px;
  background-color: black;
  line-height: 50px;
}
</style>