vue+transition-group实现拖动排序

<transition-group id='app' name="drog" tag="ul"> <div draggable="true" v-for="(item, index) in lists" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" v-bind:key="item">{{item}} 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; } } });