使用vue-grid-layout完成桌面拖拽布局功能

安装 vue-gird-layout

https://github.com/jbaysolutions/vue-grid-layout

先跑一遍demo 运行起来。

# install with npm    
npm install vue-grid-layout --save

index.vue

1 <template>
 2   <div class="board" >
 3     <div class="home">
 4       <grid-layout
 5         :layout="layoutData"
 6         :col-num="12"
 7         :row-height="layoutHeight"
 8         :is-draggable="dialogVisible"
 9         :is-resizable="dialogVisible"
10         :is-mirrored="false"
11         :vertical-compact="true"
12         :margin="[10, 10]"
13         :use-css-transforms="true"
14       >
15         <grid-item v-for="(item,index) in layoutData"
16                    :x="item.x"
17                    :y="item.y"
18                    :w="item.w"
19                    :h="item.h"
20                    :i="item.i"
21                    :key="item.i"
22         >
23           {{index}}
24         </grid-item>
25       </grid-layout>
26     </div>
27   </div>
28 </template>
29 
30 <script>
31   import layoutData from '@/virtualData/layoutData.json'
32   import VueGridLayout from 'vue-grid-layout'
33 
34   const GridLayout = VueGridLayout.GridLayout
35   const GridItem = VueGridLayout.GridItem
36   export default {
37     data() {
38       return {
39         // 布局数据
40         layoutData: [],
41         layoutConfig: {
42           height: 100, // 默认高度
43           dialogVisible: false // 是否可拖拽或改变大小
44         }
45       }
46     },
47     components: {
48       GridLayout,
49       GridItem
50     },
51     methods: {
52       init() {
53         this.layoutData = layoutData.mainData
54       }
55     },
56     created() {
57       this.init()
58     }
59   }
60 
61 </script>
62 
63 
64 <style  scoped>
65 </style>
index.vue

layoutData.json

{
  "mainData": [
    {
      "x": 0,
      "y": 0,
      "w": 1,
      "h": 1,
      "i": "0"
    },
    {
      "x": 0,
      "y": 1,
      "w": 1,
      "h": 1,
      "i": "1"
    },
    {
      "x": 0,
      "y": 2,
      "w": 1,
      "h": 1,
      "i": "2"
    },
    {
      "x": 0,
      "y": 3,
      "w": 1,
      "h": 1,
      "i": "3"
    },
    {
      "x": 1,
      "y": 0,
      "w": 1,
      "h": 1,
      "i": "4"
    },
    {
      "x": 1,
      "y": 1,
      "w": 1,
      "h": 1,
      "i": "5"
    },
    {
      "x": 1,
      "y": 2,
      "w": 1,
      "h": 1,
      "i": "6"
    },
    {
      "x": 1,
      "y": 3,
      "w": 1,
      "h": 1,
      "i": "7"
    },
    {
      "x": 2,
      "y": 0,
      "w": 1,
      "h": 1,
      "i": "8"
    },
    {
      "x": 2,
      "y": 1,
      "w": 1,
      "h": 1,
      "i": "9"
    },
    {
      "x": 2,
      "y": 2,
      "w": 1,
      "h": 1,
      "i": "10"
    },
    {
      "x": 2,
      "y": 3,
      "w": 1,
      "h": 1,
      "i": "11"
    },
    {
      "x": 3,
      "y": 0,
      "w": 1,
      "h": 1,
      "i": "12"
    },
    {
      "x": 3,
      "y": 1,
      "w": 1,
      "h": 1,
      "i": "13"
    },
    {
      "x": 3,
      "y": 2,
      "w": 1,
      "h": 1,
      "i": "14"
    },
    {
      "x": 3,
      "y": 3,
      "w": 1,
      "h": 1,
      "i": "15"
    },
    {
      "x": 4,
      "y": 0,
      "w": 1,
      "h": 1,
      "i": "16"
    },
    {
      "x": 4,
      "y": 1,
      "w": 1,
      "h": 1,
      "i": "17"
    },
    {
      "x": 4,
      "y": 2,
      "w": 1,
      "h": 1,
      "i": "18"
    },
    {
      "x": 4,
      "y": 3,
      "w": 1,
      "h": 1,
      "i": "19"
    }
  ]
}
layoutData.json

运行起来之后，页面效果

加上点背景颜色

.vue-grid-item {
  background: aquamarine;
}
原文地址：http://www.manongjc.com/article/18835.html