vue2实现元素拖拽

直接使用vue-draggable插件更好
以下是模仿代码

<!--  -->
<template><div><button v-on:click="shuffle">Shuffle</button><transition-group name="flip-list" tag="ul" class="box" ref="box"><liv-for="(item, index) in list":key="item.text"class="list":class="item.classList"draggable@dragstart="dragstart(item)"@dragenter="dragenter(item)"@dragend="dragend">{{ item.text }}</li></transition-group><div>12312</div></div>
</template><script>
// 记录被拖动的元素
let source;
export default {data() {return {list: [{ text: 1 }, { text: 2 }, { text: 3 }, { text: 4 }, { text: 5 }, { text: 6 }, { text: 7 }, { text: 8 }, { text: 9 }, { text: 10 }],};},created() {this.list = this.list.map((item) => {return {...item,classList: [],};});},methods: {shuffle: function () {this.list.sort(() => Math.random() - 0.5);},dragstart(e) {source = e;setTimeout(() => {e.classList.push("moveing");}, 0);},dragenter(e) {if (e.text === source.text) return;this.changeSort(e);},dragend(e) {let _soucre = this.list.find((item) => item.text === source.text);let classIndex = _soucre.classList.findIndex((item) => item === "moveing");_soucre.classList.splice(classIndex, 1);source = null},// 与soucre元素交换位置changeSort(e) {const targetIndex = this.list.findIndex((item) => item.text === e.text);const sourceIndex = this.list.findIndex((item) => item.text === source.text);this.list.splice(targetIndex, 1, ...this.list.splice(sourceIndex, 1, this.list[targetIndex]));},},
};
</script>
<style lang="scss" scoped>
.box {display: flex;padding: 20px;
}
.list {display: flex;justify-content: center;align-items: center;width: 100px;height: 50px;margin-right: 10px;background-color: skyblue;
}.moveing {background-color: gray;
}
.flip-list-move {transition: transform 0.5s;
}.li {display: flex;justify-content: center;align-items: center;width: 100px;height: 50px;margin-bottom: 10px;background-color: skyblue;
}
</style>