vue-grid-layout 单元格移动事件

vue-grid-layout 的单元格有move移动中和moved移动完成事件，通过移动事件我们可以获取最新的vue-grid-layou布局并保存起来。

移动事件

<div id="app">
    <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"
        :vertical-compact="true" resize-ignore-from="a" :margin="[10, 10]" :use-style-cursor="true">
        <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"
            :min-w="2" @move="moveEvent" @moved="movedEvent">
            {{item.i}}
        </grid-item>
    </grid-layout>
    <div>{{message}}</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            GridLayout: VueGridLayout.GridLayout,
            GridItem: VueGridLayout.GridItem
        },
        data() {
            return {
                message: '',
                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: {
            //单元格移动中的事件
            moveEvent: function (i, newX, newY) {
                this.message = "移动中 i=" + i + ", X=" + newX + ", Y=" + newY;
            },
            //单元格移动后的事件
            movedEvent: function (i, newX, newY) {
                this.message = "移动完成 i=" + i + ", X=" + newX + ", Y=" + newY;
            },
        }
    });
</script>

在线试一试