推荐一款：简单、易懂、功能强大的Vue3可拖拽插件

第一步：安装

npm 使用以下命令安装npm install vue-grid-layout --save
yarn 使用以下命令安装yarn add vue-grid-layout

第二步：配置全局变量

import { createApp } from 'vue'
import App from './App.vue'


import VueGridLayout from 'vue-grid-layout' // 引入layout

// 创建Vue应用实例
const app = createApp(App);
app.use(VueGridLayout)
// 挂载根组件
app.mount('#app');

第三步：vue页面使用

做完以上三步，就可以运行项目，查看效果。

基本属性介绍

属性
i	栅格中元素的ID
x	标识栅格元素位于第几列，需为自然数
y	标识栅格元素位于第几行，需为自然数
w	标识栅格元素的初始宽度，值为`colWidth`的倍数
h	标识栅格元素的初始高度，值为`rowHeight`的倍数

　　这款插件它不仅拥有模块拖拽、放大、缩小的功能。它还拥有动态创建模块、防碰撞、模块栅格布局等强大功能，赶快去使用吧。

原文连接：https://mp.weixin.qq.com/s?__biz=MzkyNDc0Nzk4OA==&mid=2247483711&idx=1&sn=5f302efa08fdd31ca8b077e5a4176ce2&chksm=c1d05084f6a7d992694f949d2077a28c5c100234ee3973c9ed245cb97b95dcfe5605d55ff60b#rd

查看原文（或关注微信公众号）可观看演示视频

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途

THE END

vue框架