逻辑:
    设定某项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. require模块化 AMD和CMD

    在CommonJS中,有一个全局性方法require(),用于加载模块.假定有一个数学模块math.js,就可以像下面这样加载. 1 var math = require('math'); 然后,就可 ...

  2. 树莓派4B-GPIO控制步进电机

    树莓派4B-GPIO控制步进电机 硬件需求: 步进电机 树莓派 杜邦线 L298N驱动模块 选择步进电机 首先需要确认步进电机,因为步进电机可分为单极性和双极步进电动机两种,这两种电机的驱动方式是不同 ...

  3. Vue 组件间通信有哪几种方式?

    父子通信 (1)父组件向子组件传值props <button-counter :title="send"></button-counter> Vue.com ...

  4. Mac Eclipse 常用快捷键汇总

    寻找类:shift+command+t 删除当前行:command+d 上移当前行代码:option+↑ 下移当前行代码:option+↓ 复制当前行至下一行:option+command+↓ 复制当 ...

  5. SpringBoot彩蛋之定制启动画面

    写在前面 在日常开发中,我们经常会看到各种各样的启动画面.例如以下几种 ① spring项目启动画面 ② mybatisplus启动画面 ③若依项目启动画面 还有很多各式各样好看的启动画面,那么怎么定 ...

  6. JVM学习笔记-如何在IDEA打印JVM的GC日志信息

    若要在Idea上打印JVM相应GC日志,其实只需在Run/Debug Configurations上进行设置即可. 拿<深入Java虚拟机>书中的3-7代码例子来演示,如 1 public ...

  7. Solo开发者社区-H5-Dooring, 开箱即用的零代码搭建平台

    Dooring-Saas 是一款功能强大,高可扩展的零代码解决方案,致力于提供一套简单方便.专业可靠.无限可能的页面可视化搭建最佳实践.(Solo社区 投稿) 功能特点 可扩展, Dooring 实现 ...

  8. 咬文嚼图式的介绍二叉树、B树/B-树

    前言 因为本人天资愚钝,所以总喜欢将抽象化的事务具象化表达.对于各类眼花缭乱的树,只需要认知到它们只是一种数据结构,类似数组,切片,列表,映射等这些耳熟能详的词汇.对于一个数据结构而言,无非就是增删改 ...

  9. Python爬虫(1-4)-基本概念、六个读取方法、下载(源代码、图片、视频 )、user-agent反爬

    Python爬虫 一.爬虫相关概念介绍 1.什么是互联网爬虫 如果我们把互联网比作一张大的蜘蛛网,那一台计算机上的数据便是蜘蛛网上的一个猎物,而爬虫程序就是一只小蜘蛛,沿着蜘蛛网抓取自己想要的数据 解 ...

  10. 从DDPM到DDIM(三) DDPM的训练与推理

    从DDPM到DDIM(三) DDPM的训练与推理 前情回顾 首先还是回顾一下之前讨论的成果. 扩散模型的结构和各个概率模型的意义.下图展示了DDPM的双向马尔可夫模型. 其中\(\mathbf{x}_ ...