实现vue-gridlayout的类似功能

最新推荐文章于 2025-06-09 09:42:40 发布

原创

最新推荐文章于 2025-06-09 09:42:40 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #gridlayout

本文详细介绍了一款基于Vue的拖拽插件flowgrid的核心逻辑与实现细节，包括节点布局、拖拽、缩放等功能，并提供了示例项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文对阿田写的flowgrid插件做详细的讲解，为此特地写了一个小项目，暂且就叫vue-dragrid，预览效果点击这里，下面会针对一个个commit来进行讲解，所有commit请看这里。

准备工作

先clone项目到本地。
git reset --hard commit命令可以使当前head指向某个commit。

完成html的基本布局

点击复制按钮来复制整个commit id。然后在项目根路径下运行git reset。用浏览器打开index.html来预览效果，该插件的html主要结果如下：

<!-- 节点容器 -->
<div class="dragrid">
  <!-- 可拖拽的节点，使用translate控制位移 -->
  <div class="dragrid-item" style="transform: translate(0px, 0px)">
    <!-- 通过slot可以插入动态内容 -->
    <div class="dragrid-item-content">

    </div>
    <!-- 拖拽句柄 -->
    <div class="dragrid-drag-bar"></div>
    <!-- 缩放句柄 -->
    <div class="dragrid-resize-bar"></div>
  </div>
</div>

使用vue完成nodes简单排版

先切换commit，安装需要的包，运行如下命令：

git reset --hard 83842ea107e7d819761f25bf06bfc545102b2944
npm install
<!-- 启动，端口为7777，在package.json中可以修改 -->
npm start

这一步一个是搭建环境，这个直接看webpack.config.js配置文件就可以了。

另一个就是节点的排版（layout），主要思路是把节点容器看成一个网格，每个节点就可以通过横坐标(x)和纵坐标(y)来控制节点的位置，左上角坐标为(0, 0)；通过宽(w)和高(h)来控制节点大小；每个节点还必须有一个唯一的id。这样节点node的数据结构就为：

{
  id: "uuid",
  x: 0,
  y: 0,
  w: 6,
  h: 8
}

其中w和h的值为所占网格的格数，例如容器是24格，且宽度为960px，每格宽度就为40px，则上面节点渲染为240px * 320px, 且在容器左上角。

来看一下dragrid.vue与之对应的逻辑：

最低0.47元/天解锁文章

200万优质内容无限畅学