<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>
Sortable实现九宫格拼图游戏
最新推荐文章于 2024-09-04 10:09:38 发布