vue垂直布局_使用vue-grid-layout完成桌面拖拽布局功能

最近在用写公司项目里的一个桌面布局功能 需要使用到vue-grid-layout

看了下网上的 基本上只有demo的使用，这个插件虽然挺不错但是缺陷也很大.

没有下边界，发生碰撞的时候块会无限的往下移动

https://github.com/jbaysoluti...

先撸一遍demo吧

:layout="layout"

:auto-size="false"

:col-num="20"

:row-height="50"

:max-rows="100"

:is-draggable="true"

:is-resizable="false"

:vertical-compact="false"

:margin="[10, 10]"

:use-css-transforms="true"

>

:x="item.x"

:y="item.y"

:w="item.w"

:h="item.h"

:i="item.i"

@resize="resizeEvent"

@move="moveEvent"

@resized="resizedEvent"

@moved="movedEvent"

>

{ {item.i}}

import Vue from 'vue'

import VueGridLayout from 'vue-grid-layout'

Vue.use(VueGridLayout)

var testLayout = [

{"x":0,"y":0,"w":1,"h":1,"i":"0"},

{"x":0,"y":1,"w":1,"h":1,"i":"1"},

{"x":0,"y":2,"w