vue grid-layout实现拖拽及摆放

 

 

下载

?

1 2 3 4 5

# install with npm    npm install vue-grid-layout --save ​ # install with yarn    yarn add vue-grid-layout

下列js代码中已经引入 

html代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<template>   <div class="board" style="width: 100%; height: 1900px">     <div class="home">       <grid-layout         :layout="layoutData"         :col-num="44"         :row-height="34"         :is-draggable="dialogVisible"         :is-resizable="false"         :is-mirrored="false"         :vertical-compact="false"         :margin="[1, 1]"         :use-css-transforms="true"         :autoSize="true"         :preventCollision="true"         :maxRows="501"         :boder="1"       > <!-- //如果需要动态引入图片则需要动态绑定img           //:style="{             //backgroundImage: 'url(' + item.img + ')'           //}"  -->         <grid-item 　　　　　　style="background:#f2f2f2"           class="gridItem"           v-for="item in layoutData"           :x="item.x"           :y="item.y"           :w="item.w"           :h="item.h"           :i="item.i"           :key="item.i"           @onclick="changeActive(item.t)"         >         {{item.i}}         </grid-item>       </grid-layout>     </div>   </div> </template>

　

data.json文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

{     "mainData": [       {         "x":0,         "y": 0,         "w": 1,         "h": 1,         "i": "0",         "img":"../assets/img/box_water.png"       },       {         "x": 1,         "y": 0,         "w": 1,         "h": 1,         "i": "1"       },       {         "x": 2,         "y":0,         "w": 1,         "h": 1,         "i": "2"       },       {         "x": 3,         "y": 0,         "w": 1,         "h": 1,         "i": "3"       },       {         "x": 4,         "y": 0,         "w": 1,         "h": 1,         "i": "4"       },       {         "x": 5,         "y":0,         "w": 1,         "h": 1,         "i": "5"       },       {         "x": 6,         "y": 0,         "w": 1,         "h": 1,         "i": "6"       },       {         "x": 7,         "y": 0,         "w": 1,         "h": 1,         "i": "7"       },       {         "x": 8,         "y": 0,         "w": 1,         "h": 1,         "i": "8"       },       {         "x": 9,         "y": 0,         "w": 1,         "h": 1,         "i": "9"       },       {         "x": 10,         "y": 0,         "w": 1,         "h": 1,         "i": "10"       },       {         "x": 11,         "y": 0,         "w": 1,         "h": 1,         "i": "11"       }     ]   }

　　

　　

script标签中内容

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

import layoutData from "@/data/data.json"; import VueGridLayout from "vue-grid-layout";   const GridLayout = VueGridLayout.GridLayout; const GridItem = VueGridLayout.GridItem;   export default {   data() {     return {       // 布局数据       layoutData: [],       dialogVisible: true, // 是否可拖拽或改变大小       layoutConfig: {         height: 100, // 默认高度       },     };   },   components: {     GridLayout,     GridItem,   },   methods: {     init() { //循环创建dom       // for (var i = 0; i <500; i++) {         //   this.layoutData.push({       //     // x: parseInt(i%43),       //     x: parseInt(i%1),       //     // y: parseInt(i/43),       //     y: parseInt(i/1),       //     w: 1,       //     h: 1,       //     i: i,       //   });       // }       this.layoutData = layoutData.mainData;       Object.freeze(this.layoutData);       console.log(layoutData);     },   },   created() {     this.init();   }, }; </script>

　　style标签中代码

?

1 2 3 4 5 6

<style> .gridItem {   font-size: 12px;   line-height: 34px; } </style>

　　这样简单的拖拽及摆放效果已经实现了！