document.write("");

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:
...
}

 

posted @ 2022-11-11 08:34  人间春风意  阅读(368)  评论(0编辑  收藏  举报