首页 > 其他分享 >vue3+elementplus+vuedraggable插件,实现左右拖拽移入,和上下拖拽排序

vue3+elementplus+vuedraggable插件,实现左右拖拽移入,和上下拖拽排序

时间:2024-02-01 14:02:23浏览次数:40  
标签:插件 elementplus gif 模块 排序 拖拽

先看目标效果(gif由迅捷gif工具制作,使用vscode可以打开gif,进行预览)

效果分析

1.左右区域,支持拖拽。左侧选项,拖入右边。可以新建大模块,也可以给模块新增一项。
2.模块内部,支持拖拽排序,并按照排序,生成一个简单的层级。
3.模块名字支持编辑。同时增加表单校验,名字不存在,则无法保存。

标签:插件,elementplus,gif,模块,排序,拖拽
From: https://www.cnblogs.com/cn-oldboy/p/18001084

相关文章

  • Docker 安装 Jenkins , 并解决初始安装插件失败
    Docker安装Jenkins,并解决初始安装插件失败:https://blog.csdn.net/loveLifeLoveCoding/article/details/105774844?ops_request_misc=&request_id=&biz_id=102&utm_term=docker%20%E5%AE%89%E8%A3%85jenkins%E9%BB%98%E8%AE%A4%E6%8F%92%E4%BB%B6%E5%A4%B1%E8%B4%A5&u......
  • 最新版Emlog采集发布插件-免费下载
    推荐一款可以自动采集网页文章数据,并发布到Emlog网站的Emlog采集发布插件(兼容最新的EmlogPro版本,也兼容之前的Emlog5.3和Emlog6.0版本),支持对接简数采集器,火车头采集器,八爪鱼采集器,后羿采集器等大多数网页采集软件。最新版Emlog采集发布插件使用方法如下:1. 下载并安装Eml......
  • 好用的IDEA插件,免费!
    今天给大家推荐一款IDEA插件:Apipost-Helper-2.0,写完代码IDEA内一键生成API文档,无需安装、打开任何其他软件;写完代码IDEA内一键调试,无需安装、打开任何其他软件;生成API目录树,双击即可快速定位API定义的代码…非常好用!主要包含以下功能:1、无侵入生成API文档编写完代码后,只需右键uploa......
  • 好用的IDEA插件,免费!
    今天给大家推荐一款IDEA插件:Apipost-Helper-2.0,写完代码IDEA内一键生成API文档,无需安装、打开任何其他软件;写完代码IDEA内一键调试,无需安装、打开任何其他软件;生成API目录树,双击即可快速定位API定义的代码…非常好用!主要包含以下功能:1、无侵入生成API文档编写完代码后,只需右键up......
  • 拖拽式在线表单设计节省开发效率,创造流程化办公!
    当前,实现流程化办公可以给企业创造高效率、高回报、高收益,因而已经成为众多企业追求的目标和梦想了。低代码技术平台是职场办公中的主流工具,利用拖拽式在线表单设计的众多优势和功能,可以助力企业创造高效率办公,实现数字化升级。什么是低代码技术平台?了解它的优势特点,就能更好地掌......
  • vue3 预览照片的插件 v-viewer
    查看图片主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。1、首先是安装pnpminstallv-viewerviewerjs 2、安装完在引用(还要记得引用它的css样式)下面有两种调用方式<scriptlang="ts"setup>importViewerfrom'v-viewer';import'viewerjs/dist/vi......
  • 【工具】全自动实时更换代理,PHP火车头/高铁插件
    作为一个网站运维/编辑人员,你是否一直在使用火车头/高铁效率提升工具?你是否会遇到以下这些情况:①目标网站限制UA(User-Agent);②目标网站判断来访(Referer);③目标网站判断cookie;④目标网站限制单个IP高频次请求;以上情况都是常见的网站内容防护手法,网站运维/编辑人员在借助火......
  • vue3+js使用插件实现pc端导出pdf
    1.安装jspdf插件:npminstalljspdf--save2.安装html2canvas插件:npminstall html2canvas--save 3.代码:<el-row><el-buttontype="primary"@click="downloadPDF">导出PDF</el-button></el-row><d......
  • vue3+ts使用插件vue3-esign完成签字、重签(h5、vant)
    1.安装vue3-esign:npmivue3-esign2.main.ts中引入:importVue3Esignfrom'vue3-esign'app.use(Vue3Esign)3.页面中代码:<van-nav-bartitle="手写签字"left-arrowfixed/><divid="sign_box"><divclass="text&......
  • vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg
    1.安装依赖:npminstallvite-plugin-svg-icons-D2.vite.config.ts中配置:import{createSvgIconsPlugin}from'vite-plugin-svg-icons'//在exportdefault({command,mode}:ConfigEnv):UserConfig中的plugins数组中添加代码plugins:[createSvgIconsPlugin......