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


Posted in Javascript onJuly 08, 2019

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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
You might like
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Python timeit模块的使用实践
2020/01/13 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python发送邮件实现基础解析
2020/08/14 Python
python 实现逻辑回归
2020/12/30 Python
3的组成教学反思
2014/04/30 职场文书
市场策划求职信
2014/08/07 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
在校生证明
2015/06/17 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android