grid.vue

<template>
  <div class="wrap">
    <div class="page">
      <div class="grid-stack" />
      <span class="divider" />
    </div>
  </div>
</template>

<script setup>
import $ from 'jquery'
import 'jquery-ui'
import { GridStack } from 'gridstack'
import 'gridstack/dist/gridstack.min.css'
import 'gridstack/dist/jq/gridstack-dd-jqueryui'
import { defineProps, onMounted, reactive } from 'vue'

const props = defineProps({
  msg: String
})

let grid = null

onMounted(() => {
  const gridstackOptions = {
    acceptWidgets: true,
    dragIn: '.widget',
    dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
    alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
    removable: '#trash',
    column: 8,
    row: 5,
    float: true
  }
  grid = GridStack.init(gridstackOptions)
  grid.on('added removed change', (e, items) => {
    let str = ''
    items.forEach(item => { str += ' (x,y)=' + item.x + ',' + item.y })
    console.log(e.type + ' ' + items.length + ' items:' + str )
  })
  grid.addWidget({
    w: 1,
    h: 1,
    content: 'Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet. Lorem ispsum dolor sit amet.'
  })
  grid.addWidget({
    w: 1,
    h: 1,
    content: '<img src="https://images.adsttc.com/media/images/5cc1/90a6/284d/d1ee/9200/0201/large_jpg/Virginia_Duran-_Zurich_Architecture-Le_Corbusier_Pavilion.jpg?1556189342" alt="" />'
  })
})
</script>

<style scoped lang="scss">
.wrap {
  position: absolute;
  top: 10px;
  right: 40px;
  bottom: 10px;
  width: 1475px;
  background-color: $greyLight;
}
.page {
  position: absolute;
  top: 60px;
  left: 80px;
  height: 920px;
  background-color: $white;
  padding: 52px 63px 0;
  .divider {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: $greyMid;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.grid-stack {
  display: grid;
  width: $h-block * 8 + $h-gap * 6 + $h-midgap * 2 !important;
  height: $v-block * 5 + $v-gap * 4 !important;
  background-image: url('/grid.svg');
  background-size: contain;

  grid-template-columns: $h-block $h-gap $h-block $h-gap $h-block $h-gap $h-block $h-midgap $h-midgap $h-block $h-gap $h-block $h-gap $h-block $h-gap $h-block;
  grid-template-rows: $v-block $v-gap $v-block $v-gap $v-block $v-gap $v-block $v-gap $v-block;

  ::v-deep(.grid-stack-item[gs-w="8"]) { width: $h-block * 8 + $h-gap * 6 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-w="7"]) { width: $h-block * 7 + $h-gap * 5 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-w="6"]) { width: $h-block * 6 + $h-gap * 4 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-w="5"]) { width: $h-block * 5 + $h-gap * 3 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-w="4"]) {
    width: $h-block * 4 + $h-gap * 3;
    &[gs-x="1"], &[gs-x="2"], &[gs-x="3"] { width: $h-block * 4 + $h-gap * 2 + $h-midgap * 2 }
  }
  ::v-deep(.grid-stack-item[gs-w="3"]) {
    width: $h-block * 3 + $h-gap * 2;
    &[gs-x="2"], &[gs-x="3"] { width: $h-block * 3 + $h-gap * 1 + $h-midgap * 2 }
  }
  ::v-deep(.grid-stack-item[gs-w="2"]) {
    width: $h-block * 2 + $h-gap * 1;
    &[gs-x="3"] { width: $h-block * 2 + $h-midgap * 2 }
  }
  ::v-deep(.grid-stack-item[gs-w="1"]) { width: $h-block * 1 + $h-gap * 0 }

  ::v-deep(.grid-stack-item[gs-x="7"]) { left: $h-block * 7 + $h-gap * 6 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-x="6"]) { left: $h-block * 6 + $h-gap * 5 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-x="5"]) { left: $h-block * 5 + $h-gap * 4 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-x="4"]) { left: $h-block * 4 + $h-gap * 3 + $h-midgap * 2 }
  ::v-deep(.grid-stack-item[gs-x="3"]) { left: $h-block * 3 + $h-gap * 3 }
  ::v-deep(.grid-stack-item[gs-x="2"]) { left: $h-block * 2 + $h-gap * 2 }
  ::v-deep(.grid-stack-item[gs-x="1"]) { left: $h-block * 1 + $h-gap * 1 }
  ::v-deep(.grid-stack-item[gs-x="0"]) { left: $h-block * 0 + $h-gap * 0 }

  ::v-deep(.grid-stack-item[gs-h="5"]) { height: $v-block * 5 + $v-gap * 4 }
  ::v-deep(.grid-stack-item[gs-h="4"]) { height: $v-block * 4 + $v-gap * 3 }
  ::v-deep(.grid-stack-item[gs-h="3"]) { height: $v-block * 3 + $v-gap * 2 }
  ::v-deep(.grid-stack-item[gs-h="2"]) { height: $v-block * 2 + $v-gap * 1 }
  ::v-deep(.grid-stack-item[gs-h="1"]) { height: $v-block * 1 + $v-gap * 0 }

  ::v-deep(.grid-stack-item[gs-y="4"]) { top: $v-block * 4 + $v-gap * 4 }
  ::v-deep(.grid-stack-item[gs-y="3"]) { top: $v-block * 3 + $v-gap * 3 }
  ::v-deep(.grid-stack-item[gs-y="2"]) { top: $v-block * 2 + $v-gap * 2 }
  ::v-deep(.grid-stack-item[gs-y="1"]) { top: $v-block * 1 + $v-gap * 1 }
  ::v-deep(.grid-stack-item[gs-y="0"]) { top: $v-block * 0 + $v-gap * 0 }

  ::v-deep(.grid-stack-item) {
    min-width: unset;
    min-height: unset;
    z-index: 10;
  }

  ::v-deep(.grid-stack-item .grid-stack-item-content) {
    overflow: hidden;
    inset: 0;
  }

  ::v-deep(.grid-stack-item .grid-stack-item-content img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>