vue实现列表拖拽排序的示例代码


Posted in Vue.js onApril 08, 2022

 本文主要介绍了vue实现列表拖拽排序的示例代码,具体如下:

vue实现列表拖拽排序的示例代码

<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>
<style>
.sort-move {
  transition: transform 0.3s;
}
</style>

到此这篇关于vue实现列表拖拽排序的示例代码的文章就介绍到这了,更多相关vue 列表拖拽排序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
vue实现拖拽交换位置
Apr 07 #Vue.js
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
You might like
php中数字0和空值的区别分析
2014/06/05 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
一些mootools的学习资源
2010/02/07 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
如何使用angularJs
2017/05/08 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
python中快速进行多个字符替换的方法小结
2016/12/15 Python
wxPython之解决闪烁的问题
2018/01/15 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python 项目目录结构设置
2020/02/14 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
市场部经理岗位职责
2014/04/10 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
流动人口婚育证明
2014/10/19 职场文书
员工自我评价范文
2015/03/11 职场文书
仓库管理制度范本
2015/08/04 职场文书
python获取带有返回值的多线程
2022/05/02 Python