qmhc / grid-layout-plus

A draggable and resizable grid layout, for Vue 3.

Grid Layout Plus

What is Grid Layout Plus?

Grid Layout Plus comes from Vue Grid Layout and is migrated to Vue 3.

It is constructed with <script setup> and normalized TypeScript.

About Vue Grid Layout

What is Vue Grid Layout?

Vue Grid Layout is a grid layout system for Vue 2, like Gridster.

Heavily inspired by React Grid Layout.

Features

• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support
• Responsive

Documentation

Check out the online documentation here.

License

All in MIT license.

grid-layout-plus's Issues

Let width be less the one (1)

How can I set the min width of the box in a way that we let the width be at the size of 20px, for example.

Shadow dislocation

When I move items frequently, sometimes the shadows don't disappear and are misplaced

Can you help me

是否可以固定容器8*8后，gridItem可以在容器内随意拖动

auto-size为false后，gridItem还是无法移动到容器的正中间或者底部，只能在对应的高度横向移动，是否可以解开限制在容器内随意移动呢？

Drag From Outside, there is a probability of extra blocks

Examples of official website

内存占用一直在涨

复现过程：在文档示例页面，控制台性能tab录制，然后切换几个例子，可以看到阶梯式增长

我拉到本地测试了一下，把tryInteract内容注释掉就正常了，推测应该是interactjs的问题

Poor performance on dragging outside of a container

https://grid-layout-plus.netlify.app/example/drag-from-outside.html

This example has poor performance on dragging fast, here is the video of reproduction

2023-05-02.13-33-39.mp4

Thanks for great and developer friendly library.

vexip报错

in ./node_modules/@vexip-ui/utils/dist/index.cjs
Module parse failed: Unexpected token

边距margin改变组件高度突变化大的问题

修改纵向外边距margin[1]时，发现每个组件的高度变化很大，但是修改横向外边距margin[0]时，组件的宽度却基本不变化，这个问题有办法解决吗？

layout-ready事件不生效

官网的示例好像也没生效

如何实现从一个GridLayout中拖放到另一个GridLayout

尝试过在GridItem移动事件中，删除源GridLayout中的layout数组中的item，再插入到目标GridLayout的layout数组中，但这样会引发handleDrag中的异常：

  if (!mouseInGrid) {
    let draggingIndex = layoutData.value[0].findIndex(ele => ele.i === itemId)
    let removed = layoutData.value[0].splice(draggingIndex, 1)
    console.log(layoutData.value[0], removed)
  }

大概可以模仿drag-from-outside例子，但先要解决拖少源GridItem时从源数组上删除该项引发异常？

嵌套拖拽无效

拖拽组件内部嵌套，内部元素能布局，但是不能拖动resize

结合v-scale-screen使用放大缩小后会出现偏移问题

作者有没有想过做堆叠功能

作者有没有想过做堆叠功能 ，使模块之间能重叠。具体使用案例👇

想在这下面添加按钮但元素内不能添加元素

设置Responsive时会出现堆叠的问题

设置Responsive时会出现堆叠的问题

Resize past lower limit does nothing.

Setting a minH on a widget entry does not prevent the widget from resizing below that level. I was able to do this via the resized event, checking for the height and setting after nextTick but it seems the minH does nothing.

Is there an easy way to auto resize a gridItem based on the contents inside?

Ex: a gridItem has contents inside that take 300px in height, i wanted the gridItem to resize itself to 300px while the resize feature wouldn't let me resize the gridItem bellow 300px as well.

ccc

This assignment will throw because "layout" is a constant

Seeing this warning on my app build:

vite v4.5.2 building for prod...
[plugin:vite:esbuild] This assignment will throw because "layout" is a constant
109|      _createVNode(_unref(GridLayout), {
110|        layout: layout,
111|        "onUpdate:layout": _cache[0] || (_cache[0] = ($event: any) => ((layout) = $event)),
   |                                                                        ^
112|        "row-height": 200,
113|        "is-draggable": draggable.value,

Multiple grids Drag&Drop

Hi!
Have u plan for support multi grids drag and drop?
Related issues from official repository
jbaysolutions/vue-grid-layout#650
jbaysolutions/vue-grid-layout#197

undefined is not an object (evaluating 'navigator.userAgent') __ERROR

Does it not support mobile devices? To use in Uniapp, output TypeError: undefined is not an object (evaluating 'navigator. userAgent') __ERROR

允许只调整宽度

是否可以设置resize只能调整宽度，而高度不变

Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.

Thanks for porting grid-layout to vue 3.

Sadly, I receive the following error when trying any of the examples:

  Plugin: vite:vue
  File: E:/ALADIN_Orga/_workspace/CARPET/src/views/ComponentTest.vue
      at assert (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:496:11)
      at genNode (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2474:7)
      at genNodeList (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2449:7)
      at genNodeListAsArray (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2436:3)
      at genNodeList (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2447:7)
      at genVNodeCall (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2616:3)
      at genNode (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2499:7)
      at genNode (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2478:7)
      at genNodeList (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2449:7)
      at genNodeListAsArray (E:\ALADIN_Orga\_workspace\CARPET\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:2436:3)

When cloning the repository and installing locally, the devserver is working though.
I've seen this and this, but have not managed to get it up and running.

The vue documentation states it might be related to default slots, that are used in combination with named slots, but I've not come up with a way to solve this yet.

Any idea on what causes the issue?

style cannot be post-processed

CSS in this project is injected by js via vite-plugin-css-injected-by-js, and thus it cannot be post-processed by PostCSS or lightningCSS on the user end.

For example, this project injects prefixes that may not be needed by users targeting the latest browsers. If the styles can be post-processed on the user end, those unnecessary styles will be removed by PostCSS to reduce bundle size.

On the other hand, this project uses some features that are not supported on old browsers like inset and percentage in opacity, both of which have a global usage of less than 95% https://caniuse.com/mdn-css_properties_inset. The users that target older browsers will need PostCSS to transpile them.

As a library, I think it would be better to build styles into a .css dist file instead of a js string.

边缘的GridItem怎么隐藏margin

npx only allow pnpm

why would you make it only run pnpm or yarn but withoout allowing to install plugin with npm?

scaling of grid not correct(?) on resize

Hi

I've created a user custom dashboard with grid-layout-plus. However I encounter a problem. When the users designs a custom dashboard and the resizes the window, the grid scales wrong. If we open the dashboard on any screen (whichever resolution) the dashboard only scales correct if the window is being displayed full screen.
So it's like the calculation of screen-pixel-per-grid-pixel uses the full screen width instead of the width of the container in which it is being displayed. I'm not sure if this is intended behavior or a bug. Is there any way to make the grid depending on the container-div?

如何避免滑动滚动条时拖动元素？

要是GridItem中有一些可以滚动的元素（如el-table滚动条），应该怎么避免滑动滚动条时拖动元素呢？

调整col-num之后能重置grid-item的位置吗

目前col-num如果从大调整到小，会导致grid-item覆盖