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 19 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue封装数字翻牌器
Apr 20 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php获取字段名示例分享
2014/03/03 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
认识less和webstrom的less配置方法
2017/08/02 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
学习python的几条建议分享
2013/02/10 Python
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
个人承诺书
2014/03/26 职场文书
环保倡议书格式范文
2014/05/14 职场文书
2014年个人年终总结
2015/03/09 职场文书
在职证明范本
2015/06/15 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android