gridstack-svelte [draft]

index.css

.widget-content {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 5em;
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  background-color: purple;
}

.grid-stack-item:nth-child(2n) .widget-content {
  background-color: fuchsia;
}

.grid-stack-item-content {
  display: flex;
  flex-direction: column;
}

.widget-header {
  border-bottom: 2px dashed white;
}

.widget-content {
  flex-grow: 1;
}

index.svelte

<script>
  import { onMount } from 'svelte'
  import { GridStack } from 'gridstack'
  import 'gridstack/dist/gridstack.css'
  import 'gridstack/dist/gridstack-extra.css'
  import './index.css'

  let count = 0
  let info = ''
  let grid = null

  const addWidget = () => {
    const constraint = Math.round(1 + 1 * Math.random())

    const node = {
      minW: constraint,
      minH: constraint,
      autoPosition: true,
    }

    node.id = count.toString()
    node.content = `
      <div class="widget-header">Draggable</div>
      <div class="widget-content"><p>${count}</p></div>
    `
    grid.addWidget(node)

    count = count + 1
  }

  onMount(async () => {
    await import('gridstack/dist/h5/gridstack-dd-native')

    grid = GridStack.init(
      {
        cellHeight: '15em',
        minRow: 1,
        column: 8,
        margin: '0.25em',
        resizable: { handles: 'n,e,s,w' },
        draggable: { handle: '.widget-header' },
      },
      document.getElementById('gridstack')
    )

    grid.on('dragstop', (event, element) => {
      const node = element.gridstackNode
      info = `You just dragged node #${node.id} to ${node.x},${node.y} – good job!`
    })
  })
</script>

<button on:click={addWidget}>Add Widget</button>
<pre>{info}</pre>
<div id="gridstack" class="grid-stack" />