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

2019-11-19 11:13:02

字体：大中小

来源：转载

供稿：网友

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

上一篇：JavaScript定时器设置、使用与倒计时案例详解

下一篇：JavaScript中Dom操作实例详解