首页 > 其他分享 >vue grid layout 设定某组件为最低位,其它子item无法拖拽超过

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

时间:2022-11-11 08:44:19浏览次数:53  
标签:vue layout initI item grid let initY


逻辑:
    设定某项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:
...
}

 

标签:vue,layout,initI,item,grid,let,initY
From: https://www.cnblogs.com/uoky/p/16879456.html

相关文章

  • 3 、Vue 【进阶】- diff 算法
    虚拟dom虚拟DOM(VirtualDOM)是对DOM的JS抽象表示,它们是JS对象,能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM,最终映射到DOM上。......
  • vite+vue3引入表态图片时出错
    在使用vite开发vue项目时,我们异性习惯vue2的方法导入图片,结果导致各种找不到图片以下是错误方法<img:src="logo"class="login-logo"/>consturl=reactive({lo......
  • vue-element-admin install error
    vue-element-admininstallerror#安装nodejsdnfmoduleresetnodejsdnfmoduleinstallnodejs:16npminstall-gpnpmvi~/.npmrc粘贴以下3行registry=http:/......
  • 快速上手VueX
    前言本文主要介绍了VueX状态管理器、VueX的核心概念、store.js以及vuex的工作流程。理解了这些概念可以让我们快速上手使用VueX,实现对Vue的状态管理。VueXVueX是对Vue的......
  • vue2项目引入新版ant-design-vue报错问题
    vue2项目引入3.2.14版ant-design-vue会报1600多个编译错误,纯属版本问题,但3.2.14版本卸载会出错,需要删除项目重建,重建后搜索依赖ant-design-vue-fixed-table,这版其实就是ant......
  • 使用宝塔面板 在centos7服务器上部署商城后台管理项目:node server后台 + vue2 前台
    使用宝塔面板在centos7服务器上部署商城后台管理项目:nodeserver后台+vue2前台域名解析假设有域名:mysite.top我们想在通过域名:app.mysite.top访问站点首先需要......
  • #yyds干货盘点#vue.config.js配置解析
    最近的项目都是基于vue2.0来做开发,这时候在配置webpack的时候遇到了个性化的配置,在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​......
  • vue-什么是虚拟dom?
    什么是虚拟dom?本质上是一个普通的JS对象,用来模拟DOM结构。(Vue内部有一个虚拟DOM转义器,会把真实DOM转成一个对象)组件在渲染的时候,会调用render函数,这个函数会生......
  • vue核心基础点
    vuevue简介Vue(发音为/vjuː/,类似view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模......
  • ApiTemplate
    1packagecom.-.it.regioc.bean.apiconfig;23importlombok.Data;45/**6*api配置模板7*/8@Data9publicclassApiTemplate{10/**11......