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 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
基于对象合并功能的实现示例
2017/10/10 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python flask 多对多表查询功能
2017/06/25 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python常用运维脚本实例小结
2020/02/14 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
作风建设年度心得体会
2014/10/29 职场文书
南京导游词
2015/02/03 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书