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>

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