Items Bounded to Container

is-bounded stops a dragged item at the grid boundary. It does not change resize limits, which still come from the item and grid settings.

Try it: Drag an item past the dashed edge with is-bounded on and off.

Live demo

Vue SFC

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

import { GridLayout } from 'grid-layout-plus'

import type { Layout } from 'grid-layout-plus'

const bounded = ref(true)
const layout = ref<Layout>([
  { x: 0, y: 0, w: 3, h: 2, i: 'a' },
  { x: 3, y: 0, w: 3, h: 2, i: 'b' },
  { x: 6, y: 0, w: 3, h: 2, i: 'c' },
])
</script>

<template>
  <label>
    <input v-model="bounded" type="checkbox" />
    Keep dragged items inside the grid
  </label>
  <GridLayout
    v-model:layout="layout"
    :is-bounded="bounded"
    :is-resizable="false"
    :gap="[10, 10]"
    :row-height="30"
  >
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>

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

import type { Layout } from 'grid-layout-plus'

const bounded = ref(true)

function createLayout(): Layout {
  return [
    { x: 0, y: 0, w: 3, h: 2, i: '0' },
    { x: 3, y: 0, w: 3, h: 2, i: '1' },
    { x: 6, y: 0, w: 3, h: 2, i: '2' },
    { x: 9, y: 0, w: 3, h: 2, i: '3' },
  ]
}

const layout = ref(createLayout())

function resetLayout() {
  layout.value = createLayout()
}
</script>

<template>
  <section class="demo-root demo-shell bounded-demo">
    <div class="demo-toolbar">
      <Checkbox v-model:checked="bounded"> is-bounded </Checkbox>
      <Tag
        :class="['demo-state', bounded ? 'demo-state--success' : 'demo-state--warning']"
        :type="bounded ? 'success' : 'warning'"
        simple
        circle
      >
        {{ bounded ? 'Bounded: on' : 'Bounded: off' }}
      </Tag>
      <Button button-type="button" @click="resetLayout"> Reset layout </Button>
    </div>
    <GridLayout
      v-model:layout="layout"
      class="demo-grid bounded-grid"
      :auto-size="false"
      :is-bounded="bounded"
      :is-resizable="false"
      :gap="[10, 10]"
      :row-height="50"
    >
      <template #item="{ item }">
        <span class="demo-item__label">{{ item.i }}</span>
      </template>
    </GridLayout>
  </section>
</template>

<style scoped>
.bounded-demo {
  min-height: 620px;
}

.bounded-grid.vgl-layout {
  height: 320px;
  border: 2px dashed var(--demo-accent, #2859b8);
}
</style>