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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue router 动态路由清除方式
May 25 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
cmd下运行php脚本
2008/11/25 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
JavaScript实现连连看连线算法
2019/01/05 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python使用zip将list转为json的方法
2018/12/31 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
初中物理教学反思
2014/01/14 职场文书
酒吧创业计划书
2014/01/18 职场文书
预备党员政审材料
2014/02/04 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
理财学专业自荐书
2014/06/28 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
环保建议书作文500字
2015/09/14 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers