Cross-grid Drag

Give grids the same transfer-config.group to move complete layout items between them. Both controlled Layout models must confirm before the move commits.

Try it: Drag a card from either grid into the other grid. Leaving the target or pressing Escape restores the source state.

Live demo

Vue SFC

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

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

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

const transferConfig: TransferConfig = { group: 'dashboard' }
const left = ref<Layout>([{ i: 'a', x: 0, y: 0, w: 2, h: 2 }])
const right = ref<Layout>([{ i: 'b', x: 0, y: 0, w: 2, h: 2 }])
</script>

<template>
  <GridLayout v-model:layout="left" :transfer-config="transferConfig">
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
  <GridLayout v-model:layout="right" :transfer-config="transferConfig">
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>

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

import type { GridTransferResult, Layout, TransferConfig } from 'grid-layout-plus'

const transferConfig: TransferConfig = { group: 'dashboard' }
const left = ref<Layout>([
  { i: 'sales', x: 0, y: 0, w: 2, h: 2, metadata: { title: 'Sales' } },
  { i: 'visits', x: 2, y: 0, w: 2, h: 2, metadata: { title: 'Visits' } },
])
const right = ref<Layout>([
  { i: 'tasks', x: 0, y: 0, w: 2, h: 2, metadata: { title: 'Tasks' } },
])
const status = ref('Drag a card between the two grids')

function handleTransfer(result: GridTransferResult) {
  status.value = `Moved ${String(result.item.i)} · target (${result.item.x}, ${result.item.y})`
}

function resetDemo() {
  left.value = [
    { i: 'sales', x: 0, y: 0, w: 2, h: 2, metadata: { title: 'Sales' } },
    { i: 'visits', x: 2, y: 0, w: 2, h: 2, metadata: { title: 'Visits' } },
  ]
  right.value = [
    { i: 'tasks', x: 0, y: 0, w: 2, h: 2, metadata: { title: 'Tasks' } },
  ]
  status.value = 'Reset · drag a card between the two grids'
}
</script>

<template>
  <section class="demo-root demo-shell">
    <div class="demo-toolbar">
      <Tag class="demo-state demo-state--accent" type="primary" simple circle>
        {{ status }}
      </Tag>
      <Button button-type="button" @click="resetDemo"> Reset demo </Button>
    </div>
    <div class="demo-drop-workspace">
      <Card class="demo-panel" title="Grid A" shadow="never">
        <GridLayout
          v-model:layout="left"
          class="demo-grid"
          :transfer-config="transferConfig"
          :col-num="4"
          :row-height="44"
          @transfer="handleTransfer"
        >
          <template #item="{ item }">
            <span class="demo-item__label">{{ item.i }}</span>
          </template>
        </GridLayout>
      </Card>
      <Card class="demo-panel" title="Grid B" shadow="never">
        <GridLayout
          v-model:layout="right"
          class="demo-grid"
          :transfer-config="transferConfig"
          :col-num="4"
          :row-height="44"
          @transfer="handleTransfer"
        >
          <template #item="{ item }">
            <span class="demo-item__label">{{ item.i }}</span>
          </template>
        </GridLayout>
      </Card>
    </div>
  </section>
</template>