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> <transition-group 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="https://www.jb51.net/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> <div> <div>拖动排序</div> <div 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实现拖放排序功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: