VUE2.6 又没有这样的库

[MRG0]

用于首页元素布局，能随意拖动，自动排序，还能改变元素大小，同时能记录元素的位置，以便储存。 我现在在研究 vue-grid-layout ，但是他的宽高设置实在令人困惑

[lisxour]

没有任意调整大小的吧，都是按格子来调的

[MRG0]

@lisxour #1 唉，需求如此

[NickHopps]

试试 gridstack.js ，可以像素级调整大小，但是问题就是全屏自适应不如 vue-grid-layout 灵活。

[NickHopps]

@NickHopps 不过 gridstack 像素级调整的原理也是把格子的大小改成 1px ，因为所有这种拖拽应用都是按格子来排版的

[LandCruiser]

首页是很多复杂的元素,还是元素比较简单？实在不行直接用 canvas ，用 fabric.js 这个库,然后自己写一套绘制和布局的方法,或者干脆元素都给丫做成图片,连绘制方法都省了,写一套布局,拖动,缩放,这都是 fabric 自带的

[MRG0]

@LandCruiser #5 其实比较简单，最多 10 多个需要排列的元素

[MRG0]

@NickHopps #3 vue-grid-layout 初始元素宽度计算真是太复杂了

[MRG0]

@LandCruiser #5 元素里还有一些需要显示和操作的东西

[LandCruiser]

@MRG0 感觉 canvas 方案工作量比较大，不太合适

[llllk]

之前用 vue-grid-layout 有做过类似的需求，不过只兼容到固定尺寸 1920x1080 宽高单位为 1px ，甚至还在容器里面再布局容器，改了些源码，默认的托拽我记得单位，是否覆盖属性不能通过 api 修改

[LavaC]

两年前用过 vue-grid-layout ，问题这插件不限高，所以做不了固定宽高的自动排序

[dzdh]

qq 空间？

[dzdh]

https://segmentfault.com/a/1190000038919982

[leokun]

@NickHopps #3 这个库一言难尽，api 设计的很反人类，代码写的一团糟，作者经常要赞助，随意关掉很重要的 issues

[jy02534655]

找个表单设计器改改就行了

[jy02534655]

比如说 https://github.com/JakHuang/form-generator 这个，把里面的表单组件换成首页组件不就行了，然后根据输出的 json 去生成页面

[MRG0]

@dzdh #13 这样的反倒好实现，不用考虑自动排序

[MRG0]

@jy02534655 #16 他这个在线演示走的 giteeio ，已经寄了

[MRG0]

@jy02534655 #16 确实就是这种设计思路

[jy02534655]

翻个墙嘛
@MRG0

[MRG0]

@jy02534655 #20 我想用 vue-draggable 再结合一个缩放库好像也能做，flex-wrap ，数组的顺序就是每一个元素的位置

[sanmaozhao]

同样的需求，我用 vue-grid-layout 实现的。目前感觉效果不错

>任意调整大小
这个需求意义不大吧，如果真的最小粒度是 1px ，那么多个区块之间最终用户想对齐，都会很困难
把格子的最小粒度调小点就是了，比如 10px

所以 OP 具体有啥解决不了的问题，不如具体说一下？

[MRG0]

@sanmaozhao #22 任意调整大小属于需求如此，只能去实现。我尝试把粒度改为 1px ，这样写确定长宽的元素就更方便了，但是，我想在每个元素内添加不同内容该怎么写呢，v-if 吗

[sanmaozhao]

>但是，我想在每个元素内添加不同内容该怎么写呢

这和 vue-grid-layout 或者其他任意布局库就都没关系了
每个区块都有自己的数据啊，比如
{
w:10, // 宽
h:4, // 高
x:0, // 水平位置
y:0, // 垂直位置
content:'内容都保存在这里'
}

[MRG0]

@sanmaozhao #24 content 里写 jsx 吗，感觉好像有点难度

[MRG0]

@sanmaozhao #24 vue-grid-layout 还是 vue-draggable 还需要进一步实验，最近两天都在改其他东西的样式

[jy02534655]

@MRG0 https://github.com/JakHuang/form-generator 这个就是基于 vue-draggable 来的，然后用 element 的 layout 来控制布局的