vue grid-layout實現拖拽及擺放

 

 

下載

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

下列js代碼中已經引入 

html代碼

<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文件

{
    "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標簽中內容

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標簽中代碼

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

　　這樣簡單的拖拽及擺放效果已經實現了！