vue实现列表拖拽排序的功能


Posted in Javascript onNovember 02, 2020

在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果;这里提供一种简单的实现方案。

此例子基于vuecli3

首先,我们先了解一下js原生拖动事件:

在拖动目标上触发事件 (源元素):

  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发
  • ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

 基于js的原生拖拽事件,本次实现的拖拽排序的原理大概是:鼠标按住列表某一项开始拖动时触发ondragstart事件,将该拖动项用变量记录下来;

接着拖拽过程中,该拖动项经过列表其他项时,触发ondragenter事件,同样记录该拖动项最后经过的列表其他项的数据,最后在ondragend 事件中

将数组列表删掉一开始ondragstart事件记录的拖动项,并将删掉的数据插入ondragenter事件最后记录的位置,完成拖动排序。

 具体代码如下:

<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <transition-group class="transition-wrapper" name="sort">
      <div v-for="(item) in dataList" :key='item.id' class="sort-item"
        :draggable="true"
        @dragstart="dragstart(item)"
        @dragenter="dragenter(item,$event)"
        @dragend="dragend(item,$event)"
        @dragover="dragover($event)"
      >
        {{ item.label }}
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from "vue-property-decorator";
  import { addWebsite } from '@/api'
  @Component({
    components: {}
  })
  export default class Test extends Vue {

    oldData: any = null; // 开始排序时按住的旧数据
    newData: any = null; // 拖拽过程的数据

    // 列表数据
    dataList:any = [
      { id:1,label:'测试一号' },
      { id:2,label:'测试二号' },
      { id:3,label:'测试三号' },
      { id:4,label:'测试四号' },
    ];

    dragstart(value: any) {
      this.oldData = value
    }

    // 记录移动过程中信息
    dragenter(value: any, e: any) {
      this.newData = value
      e.preventDefault()
    }

    // 拖拽最终操作
    dragend(value: any, e: any) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.dataList.indexOf(this.oldData)
        let newIndex = this.dataList.indexOf(this.newData)
        let newItems = [...this.dataList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
      }
    }


    // 拖动事件(主要是为了拖动时鼠标光标不变为禁止)
    dragover(e: any) {
      e.preventDefault()
    }


  };
</script>

另外

为了实现拖动的动画效果,这里用到了transition-group组件,如上面代码显示,将transition-group组件的属性name设为‘sort';并添加以下代码;

.sort-move {
      transition: transform 0.3s;
    }

       注意:为了让transition有效果出现,v-for渲染的数据列表必须有key属性,且该key属性不可设为index; 

最终效果如下:

vue实现列表拖拽排序的功能

以上就是vue实现列表拖拽排序的功能的详细内容,更多关于vue 拖拽排序的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js将json格式内容转换成对象的方法
Nov 01 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
js分页代码分享
Apr 28 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
node实现的爬虫功能示例
May 04 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
You might like
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python之pandas用法大全
2018/03/13 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python实现杨氏矩阵查找
2019/03/02 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
详细的大学生创业计划书模板
2014/01/27 职场文书
商业活动邀请函
2014/02/04 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Consul在linux环境的集群部署
2022/04/08 Servers