美文网首页
拖拽宫格vue-grid-layout的使用及案例

拖拽宫格vue-grid-layout的使用及案例

作者: 鹏多多 | 来源:发表于2023-08-06 11:29 被阅读0次

1、前言

vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽+高度/宽度自由调节的布局需求。本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。效果动态图如下：


grid-layout.gif

2、安装

  • vue2版本：
npm install vue-grid-layout --save
  • vue3版本：
npm install vue-grid-layout@3.0.0-beta1 --save

3、属性

  • GridLayout 容器：
属性名 类型 必填 默认值 描述
layout Array<Object> 是 - 数据源，每一项必须有i, x, y, w 和 h属性
colNum Int 否 12 列数
rowHeight Int 否 150 每行的高度像素
maxRows Int 否 Infinity 最大行数
margin Array<number> 是 [10, 10] 元素边距
isDraggable Boolean 否 true 是否可拖拽
isResizable Boolean 否 true 是否可调整大小
isMirrored Boolean 否 false 是否可镜像反转
autoSize Boolean 否 true 是否自动调整大小
verticalCompact Boolean 否 true 布局是否垂直压缩
preventCollision Boolean 否 false 防止碰撞，为true则元素只能拖动至空白处
useCssTransforms Boolean 否 true 是否使用CSS属性 transition-property: transform
responsive Boolean 否 false 布局是否为响应式
breakpoints Boolean 否 { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } 为响应式布局设置断点
cols Boolean 否 { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } 设置每个断点对应的列数
  • GridItem 子项：
属性名 类型 必填 默认值 描述
i string 是 - 子项ID
x number 是 - 元素位于第几列
y number 是 - 元素位于第几行
w number 是 - 初始宽度，值必须为colNum的倍数
h number 是 - 初始高度，值必须为rowHeight的倍数
minW number 否 1 元素最小宽度，值必须为colNum的倍数，如果w小于minW，则minW的值会被w覆盖
minH number 否 1 元素最小高度，值必须为rowHeight的倍数，如果h小于minH，则minH的值会被h覆盖
maxW number 否 Infinity 元素最大宽度，值必须为colNum的倍数，如果w大于maxW，则maxW的值会被w覆盖
maxH number 否 Infinity 元素最大高度，值必须为rowHeight的倍数，如果h大于maxH，则maxH的值会被h覆盖
isDraggable Boolean 否 null 是否可拖拽。如果值为null则取决于父容器
isResizable Boolean 否 null 是否可调整大小。如果值为null则取决于父容器
static Boolean 否 false 是否为静态的，无法拖拽、调整大小或被其他元素移动
dragIgnoreFrom string 否 'a, button' 标识哪些子元素无法触发拖拽事件，值为css-like选择器
dragAllowFrom string 否 null 标识哪些子元素可以触发拖拽事件，值为css-like选择器，如果值为null则表示所有子元素
resizeIgnoreFrom string 否 'a, button' 标识哪些子元素无法触发调整大小的事件，值为css-like选择器

4、事件

  • GridLayout 容器：
事件名 描述
layoutCreatedEvent 对应Vue生命周期的created
layoutBeforeMountEvent 对应Vue生命周期的beforeMount
layoutMountedEvent 对应Vue生命周期的mounted
layoutReadyEvent 当完成mount中的所有操作时生成的事件
layoutUpdatedEvent 布局更新或栅格元素的位置重新计算事件
breakpointChangedEvent 断点更改事件，每次断点值由于窗口调整大小而改变
  • GridItem 子项：
事件名 描述
moveEvent 移动时的事件
resizeEvent 调整大小时的事件
movedEvent 移动后的事件
resizedEvent 调整大小后的事件
containerResizedEvent 栅格元素/栅格容器更改大小的事件（浏览器窗口或其他）

5、占位符样式修改

直接覆盖默认的class样式

.vue-grid-item.vue-grid-placeholder {
    background: red;
    opacity: 0.2;
    transition-duration: 100ms;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.vue-grid-item.vue-grid-placeholder {
    background: green !important;
}

6、案例

注：本案例是按照vue3的写法

  • HTML：
<div class="grid_box">
    <div class="left">
        <grid-layout
            v-model:layout="layoutLeft"
            :col-num="4"
            :row-height="50"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            ref="gridLeftRef"
        >
            <grid-item
                v-for="item in layoutLeft"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                @resized="handleGridSync"
                @moved="handleGridSync"
            >
                <div class="left_layout_item">
                    <div class="del_btn" @click="deleteGrid(item.i)">删</div>
                    <span>{{ item.i }}</span>
                </div>
            </grid-item>
        </grid-layout>
    </div>
    <div class="right">
        <grid-layout
            v-model:layout="layoutRight"
            :col-num="4"
            :row-height="10"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            ref="gridRightRef"
        >
            <grid-item v-for="item in layoutRight" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
                <div class="right_layout_item">{{ item.i }}</div>
            </grid-item>
        </grid-layout>
    </div>
</div>
  • 引入组件
import VueGridLayout from 'vue-grid-layout'
  • 数据源：
const gridLeftRef = ref<any>()
const gridRightRef = ref<any>()

const layoutLeft = ref([
    { i: '1', x: 0, y: 0, w: 2, h: 2 },
    { i: '2', x: 2, y: 0, w: 2, h: 2 },
    { i: '3', x: 0, y: 0, w: 2, h: 2 },
    { i: '4', x: 2, y: 0, w: 2, h: 2 }
])

const layoutRight = ref([
    { i: '1', x: 0, y: 0, w: 2, h: 2 },
    { i: '2', x: 2, y: 0, w: 2, h: 2 },
    { i: '3', x: 0, y: 0, w: 2, h: 2 },
    { i: '4', x: 2, y: 0, w: 2, h: 2 }
])
  • 处理方法：
// 处理Grid同步
const handleGridSync = () => {
    layoutLeft.value.forEach((item1) => {
        layoutRight.value.forEach((item2) => {
            if (item1.i === item2.i) {
                item2.x = item1.x
                item2.y = item1.y
                item2.w = item1.w
                item2.h = 2
            }
        })
    })
    gridLeftRef.value.layoutUpdate()
    gridLeftRef.value.updateHeight()
    gridRightRef.value.layoutUpdate()
    gridRightRef.value.updateHeight()
}

// 创造Grid
const createGrid = () => {
    let maxH = 0
    layoutLeft.value.forEach((item) => {
        if (item.y > maxH) maxH = item.y
    })
    const uid = createUuid()
    layoutLeft.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })
    layoutRight.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })
    handleGridSync()
}

// 删除Grid
const deleteGrid = (id: string) => {
    const idx1 = layoutLeft.value.findIndex((item1) => item1.i === id)
    layoutLeft.value.splice(idx1, 1)
    const idx2 = layoutRight.value.findIndex((item2) => item2.i === id)
    layoutRight.value.splice(idx2, 1)
    handleGridSync()
}

本次分享就到这儿啦，我是@鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦

往期文章

个人主页

相关文章

  • 一书一法一工具｜九宫格法：打造属于你的精品知识输出

    九宫格现在已经很神奇的运用到各种场景中，我见到了很多运用九宫格的案例，最好的九宫格案例就是利用九宫格法来进行思考及...

  • UICollectionView实现多九宫格拖拽

    > 我这里要记录使用UICollectionView实现类似九宫格的拖拽的效果，类似iPhone桌面的Spring...

  • vue前端截取并下载网页上所有echart

    一、产品需求： 页面上有可拖拽可移动的宫格布局，每个宫格都有echarts图，（即，每个宫格中，只有一个canva...

  • Flutter初探--可拖拽排序的九宫格

    本文通过可拖拽排序的九宫格对Draggable和DragTarget的组合使用进行了说明。组合使用即让DragTa...

  • 一个vue的可拖拽的瀑布流布局组件

    介绍 vue-grid-layout是一个功能强大的瀑布流布局组件。支持用户拖拽和对改变元素大小，并提供相应的事件...

  • 九宫格拖拽

    效果实例 简单了解Grid布局（网格布局） 什么是网格布局 CSS网格布局（又称“网格”），是一种二维网格布局系统...

  • 九宫格拖拽

    效果实例 简单了解Grid布局（网格布局） 什么是网格布局 CSS网格布局（又称“网格”），是一种二维网格布局系统...

  • 九宫格拖拽

    效果如下图： html结构和样式： js操作代码：首先定义几个工具函数，例如：批量设置样式的、获取随机颜色的等等。...

  • Flutter仿QQ讨论组头像

    前言 上篇文章分享了Flutter仿微信/微博九宫格。已实现类似微信/微博展示图片九宫格，拖拽排序，微信群组头像，...

  • JS 实现拖拽之 - 列表拖拽

    这次的列表拖拽模型主要模仿的就是简书后台写文章里面的功能。上个九宫格拖拽只是这次的一个意外。研究完上个模型再写这个...

网友评论

      本文标题：拖拽宫格vue-grid-layout的使用及案例

      本文链接：https://www.haomeiwen.com/subject/qnaipdtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|拖拽宫格vue-grid-layout的使用及案例|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！