啥也不说，贴上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Title</title></head>
<style>
ul {
min-height: 100px;
width: 200px;
margin: 20px auto;
background: #eee;
}
li {
min-height: 2em;
margin-top: 10px;
background: #abcded;
}
/组件过渡类/
.drog-move {
transition: transform 1s;
}
</style>
<body>
<div id="app">
<transition-group name="drog" tag="ul"> <li draggable="true" v-for="(item, index) in lists" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" v-bind:key="item">{{item}}</li></transition-group></div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',data: { lists: ['1: apple', '2: banana', '3: orange', '4: melon']},methods: { //取消默认行为 allowDrop(e){ e.preventDefault(); }, //开始拖动 dragStart(e, index){ let tar = e.target; e.dataTransfer.setData('Text', index); if (tar.tagName.toLowerCase() == 'li') { // console.log('drag start') // console.log('drag Index: ' + index) } }, //放置 drop(e, index){ this.allowDrop(e); // console.log('drop index: ' + index); //使用一个新数组重新排序后赋给原变量 let arr = this.lists.concat([]), dragIndex = e.dataTransfer.getData('Text'); temp = arr.splice(dragIndex, 1); arr.splice(index, 0, temp[0]); // console.log('sort'); this.lists = arr; }}})
</script>
</html>