vue项目添加拖拽功能

客户突然新增一个需求，菜单可以拖拽排序！！！！总是突然提一些脑抽的需求！！！

首先安装vue拖拽的插件，安装依赖包 npm install vuedraggable

然后呢就可以在项目中使用啦

import draggable from "vuedraggable"

<draggable

v-model="navList"

forceFallBack="true"

animation="1000"

style="display:flex;flex-wrap:wrap"

@start="onStart"

@end="onEnd"

@sort="handleSortChange">

/***中间部分就是循环遍历菜单项*/

<el-card

shadow="always"

v-for="(item,index) in navList"

:key="item.id"

></el-card>

</draggable>

handleSortChange(val){

const targetRow=this.navList.splice(val.oldIndex,1)[0];

this.navList.splice(val.newIndex,0,targetRow)

let newArr = this.navList.splice(0)

this.navList = []

this.navList = newArr;

}

vue项目添加拖拽功能相关推荐

Vue 实现图片拖拽功能
功能背景: 需要对导航栏的icon,支持拖拽排序功能,然后自动保存. 原理讲解: 随意拖动一张图到另外一个图片上面时,两张图片交换位置. 原理:现有一个图片的列表,拖动其中一个图片(触发dragsta ...
如何在vue中实现拖拽功能
HTML5 drag & drop 拖拽与拖放想要实现该功能,先了解一下H5中的drag和drop这2个概念.
vue中实现拖拽功能
自定义的全局指令提示:拖拽指令文章目录自定义的全局指令一.拖拽 1.自定义拖拽指令 2.页面挂载 3.css样式提示:以下是本篇文章正文内容,下面案例可供参考一.拖拽 1.自定义拖拽指令 ...
css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
ant-desgin vue 弹窗拖拽功能实现
实现拖拽功能,主要有以下几个步骤: 1. 鼠标点击时获取鼠标的坐标,并开始监听鼠标的移动和鼠标的松开动作 2. 鼠标移动时获取当前坐标,并计算相对于鼠标点击时坐标的偏移值,并修改弹窗的偏移量 3. 鼠 ...
vue：实现简单的拖拽功能
背景平常做业务很容易遇到拖拽功能,没做之前总觉得会很复杂,今天来看一下到底是怎么实现的. 拖拽API 这是 HTML5 新增的 API,当给元素设置 draggable="true&quo ...

vue项目添加拖拽功能

vue项目添加拖拽功能相关推荐

最新文章

热门文章