Sortable实现九宫格拼图游戏

<template>
  <div class="layout">
    <template v-for="(item, index) in imgList">
      <div class="item" :id="'item'+index" :data-sign="index">
        <div class="imgDrag" :data-num="item.name" :class="{'active': index+'' === noDragNum}">
          {{ item.name }}
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import Sortable from 'sortablejs';

export default {
  components: {},
  data() {
    return {
      noDragNum: '8',
      imgList: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let arr = [
        {name: '0', url: 'https://via.placeholder.com/200x200'},
        {name: '1', url: 'https://via.placeholder.com/200x200'},
        {name: '2', url: 'https://via.placeholder.com/200x200'},
        {name: '3', url: 'https://via.placeholder.com/200x200'},
        {name: '4', url: 'https://via.placeholder.com/200x200'},
        {name: '5', url: 'https://via.placeholder.com/200x200'},
        {name: '6', url: 'https://via.placeholder.com/200x200'},
        {name: '7', url: 'https://via.placeholder.com/200x200'},
        {name: '8', url: 'https://via.placeholder.com/200x200'},
      ]
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      this.imgList = arr;
      this.$nextTick(() => {
        this.initSortable();
      });
    },
    initSortable() {
      let that = this;
      let noDragNum = that.noDragNum
      let drag = false
      for (let i = 0; i < 9; i++) {
        let dom = document.getElementById(`item${i}`);
        let config = {
          animation: 500,
          draggable: ".imgDrag",
          handle: ".imgDrag",
          group: {
            name: "group",
            pull: function (to, from, dragEl, evt) {//拖走
              drag = false
              let toDom = to.el.querySelector(".imgDrag");
              let fromDom = from.el.querySelector(".imgDrag");
              let formDragNum = from.el.getAttribute("data-sign");
              let toDragNum = to.el.getAttribute("data-sign");
              let arr = that.getYes(noDragNum)
              if (!arr.includes(formDragNum)) {
                return false;
              }
              if (noDragNum !== toDragNum) {
                return false;
              }
              if (noDragNum === formDragNum) {
                return false;
              } else {
                if (arr.includes(formDragNum)) {
                  noDragNum = formDragNum;
                  to.el.removeChild(toDom);
                  from.el.appendChild(toDom);
                  to.el.appendChild(fromDom);
                  drag = true
                  return true;
                } else {
                  return false;
                }
              }
            },
            put: function (to, from, dragEl, evt) { //拖入
              return false;
            }
          },
          onMove: function (evt, originalEvent) {
            return false
          },
          //拖动结束
          onEnd: function (evt) {
            if (drag) {
              let arr = []
              for (let i = 0; i < 9; i++) {
                let dom = document.getElementById(`item${i}`);
                let imgDom = dom.querySelector(".imgDrag");
                let num = imgDom.getAttribute("data-num");
                arr.push(num);
              }
              // 判断是否完成
              if (JSON.stringify(arr) === JSON.stringify(["0", "1", "2", "3", "4", "5", "6", "7", "8"])) {
                that.$message({message: '恭喜你，拼图完成', type: 'success'});
              }
            }
          },
        };
        Sortable.create(dom, config);
      }
    },
    getYes(num) {
      switch (num) {
        case '0':
          return ['1', '3'];
        case '1':
          return ['0', '2', '4'];
        case '2':
          return ['1', '5'];
        case '3':
          return ['0', '4', '6'];
        case '4':
          return ['1', '3', '5', '7'];
        case '5':
          return ['2', '4', '8'];
        case '6':
          return ['3', '7'];
        case '7':
          return ['4', '6', '8'];
        case '8':
          return ['5', '7'];
      }
    },
  }
};
</script>
<style>
.layout {
  width: 635px;
  height: 635px;
  padding: 5px;
  background: #e0e0e0;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  .item {
    width: 200px;
    height: 200px;
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    border: 1px solid #2e2d2d;
    cursor: pointer;

    div {
      width: 200px;
      height: 200px;
      color: black;
      font-size: xxx-large;
      text-align: center;
      line-height: 200px;
      background: #afd1ec;
    }

    .active {
      background: #43f15a;
    }
  }
}
</style>