Vue中實現拖放排序，啥也不說，貼上代碼：
<!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>ps：下面看下vue 拖拽排序的實例代碼，具體代碼如下所示：
<template> <section class="main"> <div class="drag-box-left"> <div class="drag-title">拖動排序</div> <div class="drag-list" draggable="true" v-for="list in data1" :data-id="list.id" @dragstart="dragstartEvent" @dragend="dragendEvent" @dragenter="dragenterEvent" @dragleave="dragleaveEvent" @dragover="dragoverEvent" >{{list.title}}</div> </div> </section></template><script> export default { data() { return { dragElement: null, lock: true, data1: [ {id: 1, title: '這里是列表1的標題'}, {id: 2, title: '這里是列表2的標題'}, {id: 3, title: '這里是列表3的標題'}, {id: 4, title: '這里是列表4的標題'}, {id: 5, title: '這里是列表5的標題'}, {id: 6, title: '這里是列表6的標題'}, {id: 7, title: '這里是列表7的標題'} ], data2: [ {id: 1, title: '這里是列表11的標題'}, {id: 2, title: '這里是列表12的標題'}, {id: 3, title: '這里是列表13的標題'}, {id: 4, title: '這里是列表14的標題'} ] } }, methods: { dragstartEvent(ev) { const self = this; self.dragElement = ev.target; ev.target.style.backgroundColor = '#f8f8f8'; }, dragendEvent(ev) { ev.target.style.backgroundColor = '#fff'; ev.preventDefault(); }, dragenterEvent(ev) { const self = this; if(self.dragElement != ev.target){ ev.target.parentNode.insertBefore(self.dragElement, ev.target); } }, dragleaveEvent(ev) { const self = this; if(self.dragElement != ev.target){ if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){ ev.target.parentNode.appendChild(self.dragElement); self.lock = false; }else{ self.lock = true; } } }, dragoverEvent(ev) { ev.preventDefault(); } } }</script><style scoped> .drag-box-left{ float: left; width: 45%; } .drag-box-right{ float: right; width: 45%; } .drag-list{ border: 1px solid #ddd; padding:10px; margin-bottom: 20px; transition: border .3s; } .drag-list:hover{ border: 1px solid #20a0ff; } .drag-title{ font-weight: 400; line-height: 25px; margin: 10px 0; font-size: 22px; color: #1f2f3d; }</style>總結
以上所述是小編給大家介紹的Vue實現拖放排序功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
