注入依賴

npm install --save vue-grid-layout

頁面內容

<-- 這裡走個for迴圈就可以當做需要的拖拽元件區域 -->
<div  @drag="drag" @dragend="dragend" class="droppable-element" draggable="true"
             unselectable="on"><img style="width:100%;height:100%" src="@/utils/11111.jpg"></div>
<-- 拖拽搭建頁面 -->
        <div id="
 
content">
            <grid-layout ref="gridlayout" :layout.sync="layout"
                         :col-num="12"
                         :row-height="30"
                         :is-draggable="true"
                         :is-resizable="false"
                         :vertical-compact="true
 
"
                         :use-css-transforms="true"
            >
                <grid-item :key="item.i" v-for="item in layout"
                           :x="item.x"
                           :y="item.y"
                           :w="item.w"
                           :h="item.h"
                           :i
 
="item.i"
                >
                  <img :src="item.ims" style="width:100%;height:100%">
                    <span class="text">{{ item.i }}</span>
                </grid-item>
            </grid-layout>
        </div>

js事件（引入依賴）

import VueGridLayout from 'vue-grid-layout'
let mouseXY = {"x": null, "y": null};
let DragPos = {"x": null, "y": null, "w": 1, "h": 1, "i": null};

js事件（引數）

layout: [
                {"x":0,"y":0,"w":2,"h":2,"i":"0"},
                {"x":2,"y":0,"w":2,"h":4,"i":"1"},
                {"x":4,"y":0,"w":2,"h":5,"i":"2"},
                {"x":6,"y":0,"w":2,"h":3,"i":"3"},
            ],

js事件（事件功能）

drag(res){
      let parentRect = document.getElementById('content').getBoundingClientRect();
            let mouseInGrid = false;
            // 拖拽的位置發生變化
            if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
                // 開啟建立
                mouseInGrid = true;
            }
            // 確認建立後判斷是否有新建立的東西
            if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) {
              console.log('建立新增')
                this.layout.push({
                    x: (this.layout.length * 2) % (this.colNum || 12),
                    y: this.layout.length + (this.colNum || 12), // puts it at the bottom
                    w: 2,
                    h: 3,
                    i: 'drop',
                });
            }
            // 查詢是否有新建立的東西
            let index = this.layout.findIndex(item => item.i === 'drop');
            // 判斷如果沒有新建立的
            if (index !== -1) {
                try {
                    // gridlayout元素下最後一個盒子的樣式隱藏
                    this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = "none";
                } catch {
                }
                // gridlayout元素下新新增的盒子
                let el = this.$refs.gridlayout.$children[index];
                // 新盒子的位置
                el.dragging = {"top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left};
                // 新盒子的位置計算
                let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
                // 新創的陰影位置
                if (mouseInGrid === true) {
                    // 移動的位置（後面的兩個值更改陰影大小）
                    this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 2, 2);
                    console.log(this.layout[index].x,111111)
                    DragPos.i = String(index);
                    DragPos.x = this.layout[index].x;
                    DragPos.y = this.layout[index].y;
                }
                // 有過的盒子
                if (mouseInGrid === false) {
                  console.log(2222)
                    // 移動位置
                    this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1);
                    // 陣列檢測輸出沒有drop的
                    this.layout = this.layout.filter(obj => obj.i !== 'drop');
                }
            }
    },
    dragend(res){
      console.log(res,"dragend")
      let parentRect = document.getElementById('content').getBoundingClientRect();
            let mouseInGrid = false;
            if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            if (mouseInGrid === true) {
      // this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1);
　　　　// 新增盒子

                this.layout = this.layout.filter(obj => obj.i !== 'drop');
      this.layout.push({
                    x: DragPos.x,
                    y: DragPos.y,
                    w: 2,
                    h: 2,
                    i: DragPos.i,
                    ims:'https://img1.baidu.com/it/u=1228507199,1542939359&fm=26&fmt=auto&gp=0.jpg'
                });
                // this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
            }
    },