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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue的过滤器你真了解吗
Feb 24 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 采集程序中常用的函数
2009/12/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
javascript常用的设计模式
2017/02/09 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python实现图像全景拼接
2020/03/27 Python
python为什么会环境变量设置不成功
2020/06/23 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
高二化学教学反思
2014/01/30 职场文书
表彰会主持词
2014/03/26 职场文书
项目投资意向书
2014/04/01 职场文书
拉歌口号大全
2014/06/13 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python