vue grid layout 设定某组件为最低位，其它子item无法拖拽超过

逻辑：
    设定某项X为底部
    逻辑：
    for 循环获取最低位的item Y的信息：i 和 y
    如果i != X.i
        initY = X.y
        则调整X.y = initY + Y.h 
        调整Y.y = initY

方法位置：
layout-updated回调时，进行调整位置
layoutUpdatedEvent: function (newLayout) {
    this.keepBottom()
},

keepBottom() {
	let initI = 0
	let initY = 0 // 获取当前最低位的item的Y的值
	for (let m = 0; m < this.layout.length; m++) {
		let ly = this.layout[m]
		if (initY < ly.y) {
			initY = ly.y
			initI = m
		}
	}
	if (initY != this.layout[1].y) {
		// console.log('最后一位不为i为1的按钮')
		let bottom = this.layout[1].y
		this.layout[1].y = bottom + this.layout[initI].h
		this.layout[initI].y = bottom
	}
},

例如：

<grid-layout
	:layout.sync="layout"
	:col-num="1"
	:row-height="30"
	:is-draggable="allDragFlag"
	:is-resizable="false"
	:is-mirrored="false"
	@layout-updated="layoutUpdatedEvent"
	:vertical-compact="true"
	:margin="[0, 0]"
	:use-css-transforms="false"
>
	<grid-item
			v-for="item in layout"
			:x="item.x"
			:y="getChnageY(item)"
			:h="item.h"
			:w="item.w"
			:minH="item.h"
			:maxH="item.h"
			:i="item.i"
			@move="moveItem"
			@moved="movedItem"
			:static="item.static != null ? item.static : false"
			:key="item.i"
		>
	</grid-item>
</grid-layout>

变量说明：
layout：布局数据
col-num=1:一列
row-height=30 :一行高度为30px
:is-draggable="allDragFlag":是否可以拖拽，变量true或false
:is-resizable="false"：是否可以调整大小
:is-mirrored="false"：是否镜像翻转
@layout-updated="layoutUpdatedEvent"：布局数据发生变更时触发的事件
:vertical-compact="true"：是否垂直紧凑布局
:margin="[0, 0]"：grid item的margin
:use-css-transforms="false":是否使用css方式transform
@move="moveItem"：grid item移动过程中的回调方法
@moved="movedItem"：grid item 移动完成后的回调方法
layout中item的结构：
{
x:
y:
w:
h:
i:
static:
...
}

原文地址：http://www.cnblogs.com/uoky/p/16879456.html