Responsive

Effect

Displayed as [x, y, w, h]:

0: [0, 0, 2, 2]

1: [2, 0, 2, 4]

2: [4, 0, 2, 5]

3: [6, 0, 2, 3]

4: [8, 0, 2, 3]

5: [10, 0, 2, 3]

6: [0, 2, 2, 5]

7: [2, 4, 2, 5]

8: [4, 5, 2, 5]

9: [6, 3, 2, 4]

10: [8, 3, 2, 4]

11: [10, 3, 2, 4]

12: [0, 10, 2, 5]

13: [2, 11, 2, 5]

14: [4, 10, 2, 4]

15: [6, 7, 2, 4]

16: [8, 7, 2, 5]

17: [10, 7, 2, 2]

18: [0, 7, 2, 3]

19: [2, 9, 2, 2]

Draggable Resizable Responsive

Source

vue

<script setup lang="ts">
import { ref, reactive } from 'vue'

const draggable = ref(true)
const resizable = ref(true)
const responsive = ref(true)

const layout = reactive([
  { 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' },
  { x: 8, y: 0, w: 2, h: 3, i: '4' },
  { x: 10, y: 0, w: 2, h: 3, i: '5' },
  { x: 0, y: 5, w: 2, h: 5, i: '6' },
  { x: 2, y: 5, w: 2, h: 5, i: '7' },
  { x: 4, y: 5, w: 2, h: 5, i: '8' },
  { x: 6, y: 4, w: 2, h: 4, i: '9' },
  { x: 8, y: 4, w: 2, h: 4, i: '10' },
  { x: 10, y: 4, w: 2, h: 4, i: '11' },
  { x: 0, y: 10, w: 2, h: 5, i: '12' },
  { x: 2, y: 10, w: 2, h: 5, i: '13' },
  { x: 4, y: 8, w: 2, h: 4, i: '14' },
  { x: 6, y: 8, w: 2, h: 4, i: '15' },
  { x: 8, y: 10, w: 2, h: 5, i: '16' },
  { x: 10, y: 4, w: 2, h: 2, i: '17' },
  { x: 0, y: 9, w: 2, h: 3, i: '18' },
  { x: 2, y: 6, w: 2, h: 2, i: '19' }
])
</script>

<template>
  <div class="layout-json">
    Displayed as <code>[x, y, w, h]</code>:
    <div class="columns">
      <div v-for="item in layout" :key="item.i">
        <strong>{{ item.i }}</strong>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
      </div>
    </div>
  </div>
  <hr />
  <input v-model="draggable" type="checkbox" /> Draggable
  <input v-model="resizable" type="checkbox" /> Resizable
  <input v-model="responsive" type="checkbox" /> Responsive
  <br />
  <div style="margin-top: 10px">
    <GridLayout
      v-model:layout="layout"
      :row-height="30"
      :is-draggable="draggable"
      :is-resizable="resizable"
      :responsive="responsive"
    >
      <template #item="{ item }">
        <span class="text">{{ item.i }}</span>
      </template>
    </GridLayout>
  </div>
</template>

<style scoped>
.vgl-layout {
  background-color: #eee;
}

:deep(.vgl-item:not(.vgl-item--placeholder)) {
  background-color: #ccc;
  border: 1px solid black;
}

:deep(.vgl-item--resizing) {
  opacity: 90%;
}

:deep(.vgl-item--static) {
  background-color: #cce;
}

.text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 24px;
  text-align: center;
}

.layout-json {
  padding: 10px;
  margin-top: 10px;
  background-color: #ddd;
  border: 1px solid black;
}

.columns {
  columns: 120px;
}
</style>

Responsive ​

Effect ​

Source ​

Responsive

Effect

Source