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>