Vue实现拖放排序功能的实例代码

时间：2021-05-26

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实现拖放排序功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章