vue-grid-layout 中文文档

vue-grid-layout 防止碰撞

vue-grid-layout 设置 prevent-collision 可以防止单元格碰撞,就是A单元格移动到B单格时,不会改变B单元格的位置。

防止碰撞

<!-- 设置 prevent-collision true防止碰撞 -->
<grid-layout :prevent-collision="true" > </grid-layout>

在线试一试

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue-grid-layout 防止碰撞</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/vue-grid-layout/vue-grid-layout.umd.min.js"></script>
</head>
<body style="padding:10px;">
    <div id="app">
        <grid-layout :prevent-collision="true" :layout.sync="layout" :col-num="12" :row-height="30">
            <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
                {{item.i}}
            </grid-item>
        </grid-layout>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            components: {
                GridLayout: VueGridLayout.GridLayout,
                GridItem: VueGridLayout.GridItem
            },
            data() {
                return {
                    layout: [
                        { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" },
                        { "x": 2, "y": 0, "w": 2, "h": 2, "i": "1" },
                        { "x": 4, "y": 0, "w": 2, "h": 2, "i": "2" },
                        { "x": 0, "y": 1, "w": 6, "h": 2, "i": "3" },
                    ]
                };
            },
            methods: {

            }
        });
    </script>
</body>
</html>
Catalog
快速入门 Usage 属性列表 事件列表 外部拖入单元格 动态添加删除 防止碰撞 响应式布局 镜像反转 允许拖动 多个容器 单元格调整大小 单元格移动事件