Events

Listen to layout changes using the onchange callback on Grid or individual GridItems. Useful for persisting layout or triggering side effects.

Last Event

Move or resize an item...

Event Log

No events yet...

Code

svelte

<script lang="ts">
  import Grid, { GridItem, type LayoutChangeDetail } from '@appulsauce/svelte-grid';

  function handleChange(detail: LayoutChangeDetail) {
    console.log('Layout changed:', detail.item);
    // Persist to database, localStorage, etc.
  }
</script>

<Grid onchange={handleChange}>
  <GridItem x={0} y={0} onchange={handleChange}>
    ...
  </GridItem>
</Grid>