How to drag an Item from one Grid into another Grid

[werto87]

I want to drag an item from one grid into another grid. When I try to make a second grid I get the error message "Uncaught TypeError: items is undefined" Does grid has to bind to a variable with the name items? example code:

    import Grid from "svelte-grid";
    import gridHelp from "svelte-grid/build/helper/index.mjs";

    let items = [
        {
            2: gridHelp.item({
                x: 0,
                y: 0,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "0",
        },

        {
            2: gridHelp.item({
                x: 0,
                y: 2,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "1",
        },
        {
            2: gridHelp.item({
                x: 1,
                y: 2,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "2",
        },
    ];
    let items2 = [
        {
            2: gridHelp.item({
                x: 0,
                y: 0,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "0",
        },

        {
            2: gridHelp.item({
                x: 0,
                y: 2,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "1",
        },
        {
            2: gridHelp.item({
                x: 1,
                y: 2,
                w: 1,
                h: 1,
                resizable: false,
            }),
            id: "2",
        },
    ];
    const cols = [[1200, 2]];
</script>

<main>
    <div class="my-container">
        <div class="demo-container">
            <div class="demo-container">
                <Grid
                    bind:items
                    rowHeight={100}
                    let:item
                    let:dataItem
                    {cols}
                    fillSpace={false}
                >
                    <div class="my-div">{dataItem.id}</div>
                </Grid>
                <Grid
                    bind:items2
                    rowHeight={100}
                    let:item
                    let:dataItem
                    {cols}
                    fillSpace={false}
                >
                    <div class="my-div">{dataItem.id}</div>
                </Grid>
            </div>
        </div>
    </div>
</main>

How to use two grids? How to drag and drop an item from one grid into another?