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 element实现表格合并行数据
Nov 30 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
影视制作岗位职责
2013/12/04 职场文书
四年大学自我鉴定
2014/02/17 职场文书
员工安全生产责任书
2014/07/22 职场文书
销售人员求职信
2014/07/22 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
八年级作文之友谊
2019/12/02 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技