开发笔记03：vue3+vite+typescript 使用GridStack.js实现拖拽组件效果

提示：本文章仅用来记录GridStack.js，可借鉴案例过少，所以试着自己写了一个，欢迎指正！

文章目录

• 前言
• 一、GridStack是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

例如：之前有用到vue-grid-layout，但是因为需求较繁琐，无法实现拖拽之后手动更新组件位置，所以更改插件试试，效果图如下：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、GridStack是什么？

这是一个适用于多种前端框架（包括Vue）的开源网格布局引擎。它支持各种布局设置和可选插件，具有强大的事件处理功能，并允许你创建可拖放和调整大小的网格项

二、使用步骤

1.引入库

代码如下（示例）：

npm install gridstack

2.页面使用

import { GridStack } from 'gridstack';
import 'gridstack/dist/gridstack.css';

const GridStackInit = () => {
  let Options = {
    dragOut: true,
    margin: 5, //网格里面之间的距离
    acceptWidgets: true, //接受从其他网格或外部拖动的小部件
    dragIn: ".grid-stack", // 注：组件名字需与class类名保持一致
  };
  const grid = GridStack.init(Options)
  grid.load([
    { w: 4, h: 2, content: "1" },
    {
      w: 4,
      h: 4,
      content: "不能缩放，也不能移动！",
      noResize: true,
      noMove: true,
    },
    { w: 2, h: 2, content: "不能缩放！", noResize: true },
    { w: 2, h: 2, content: "4" },
    { w: 2, h: 2, content: "5" },
    { w: 2, h: 4, content: "6" },
    { w: 4, h: 2, content: "7" },
    { w: 2, h: 2, content: "8" },
    { w: 6, h: 4, id: "card_9" },
    { w: 2, h: 2, content: "10" },
    { w: 2, h: 2, content: "11" }
  ])
}
onMounted(() => {
  GridStackInit()
})

<template>
    <div class="grid-stack"></div>
</template>

此时在页面上效果其实可以已经看到了，option配置详情可见官网

效果如图所示：

---

总结

注： 如果用的是简单的拖拽的话，以上差不多就可以了。

因需求不同，本次需求使用的功能较为繁琐，中间还掺杂着多个组件内容相互拖拽，且每个模块可以相互拖拽，所以还夹杂着draggable插件所以代码会较多，故将页面内容分为多个小组件进行拆分合并，并结合vite中功能将页面合并到组件里，后续还会慢慢记录下来。。。

总体开发需求为：拖拽模块即可展示到页面上，生成该模块相对应展示的内容，目前还在开发阶段，等我优化完成再细细讲来！！