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 08 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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提示undefined index的几种解决方法
2012/05/21 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
12步教你理解Python装饰器
2016/02/25 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python OS模块实例详解
2019/04/15 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
法学院方阵解说词
2014/01/29 职场文书
小学美术教学反思
2014/02/01 职场文书
高一新生军训感言
2014/03/02 职场文书
党的群众路线调研报告
2014/11/03 职场文书
实名检举信范文
2015/03/02 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
python中filter,map,reduce的作用
2022/06/10 Python