逻辑:
    设定某项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 grid layout 设定某组件为最低位,其它子item无法拖拽超过的更多相关文章

  1. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  2. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  3. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  4. Vue-Grid-Layout分享一款好用的可拖拽组件

    在使用Grafana的过程中,发现Grafana关于视图页面中每一个面板都可拖拽,可随意放大放小,体验非常棒,F12看了Grafana的代码,看打包后的代码很像react,进一步css,看到有grid ...

  5. 基于Vue实现可以拖拽的树形表格(原创)

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

  6. React造轮子:拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  7. Vue 结合 echarts 原生 html5 实现拖拽排版报表系统

    前言 不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...

  8. gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

    前言   Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...

  9. HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...

  10. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

随机推荐

  1. CF1137C 题解

    考虑把每个点进行拆成 \(d\) 个点表示星期几走到这个点,那么原图上的边 \((u,v)\) 就被拆成\((pos_{u,i},pos_{v,i+1})\) 表示星期的变化. 然后考虑进行缩点,在一 ...

  2. Lambda表达式常见用法

    Lambda介绍 Lambda,别名函数式编程 函数式编程是一种编程范式.它把计算当成是数学函数的求值,从而避免改变状态和使用可变数据.它是一种声明式的编程范式,通过表达式和声明而不是语句来编程. L ...

  3. css-渐变简约的登录设计

    代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. [oeasy]python0041_teletype历史_博多码_shift_capslock_字符数字切换_gear

    teletypewriter 历史 回忆上次内容 上次见到了一个真的机械打字机 感受到了蒸汽朋克的时代背景 上上次区分了一些概念 terminal终端,电脑连线最终的端点 TeleTYpewriter ...

  5. oeasy教您玩转vim - 34 - # 查找进阶

    ​ 查找进阶 回忆上节课内容 上次是搜索,是全文搜索 和我们以前的行内有点像 / 正向,? 反向 n 保持方向,N 改变方向 hls 让搜索结果高亮 wrapscan 可以从头搜索 noh 取消本次高 ...

  6. oeasy教您玩转vim - 74 - # 功能键Fn映射map进阶

    ​ 映射map 回忆上次缩写的细节 上次了解到了:map映射 可以定义映射 :map ; : 查询映射 :map :map ; 还可以取消映射 :unmap 可以映射到指定的模式 :map 所有模式 ...

  7. Node.js 处理 File

    Node.js 处理 File fs 模块 常规使用 运用递归遍历目录树 创建文件和目录 读写文件 path 模块 对于 file 的理解,此处 fs 模块 Node.js 提供了处理文件系统的内置模 ...

  8. JavaScript中的new map()和new set()使用详细(new map()和new set()的区别)

    简介:new Map(): 在JavaScript中,new Map()用于创建一个新的 Map 对象.Map 对象是一种键值对的集合,其中的键是唯一的,值可以重复.new Set(): 在JavaS ...

  9. 2个月搞定计算机二级C语言——真题(1)解析

    1. 前言 大家好,我是梁国庆. 这段时间将持续发布计算机二级 C 语言真题的解析,想要同步练习,需要资源包的朋友可以跳转免费获取--<3个月搞定计算机二级C语言--准备工作>. 现在恐怕 ...

  10. 搭建lnmp环境-mysql(第五步)

    版本mysql 5.7 先删除系统自带的db 新建文件夹/data/download 进入后下载 wget http://repo.mysql.com/mysql57-community-releas ...