I am using gridstack.js in my Blazor application for customized dashboard components.
resize and drag the component within the gridstack () is working fine.
Now I want to show a few components in another panel and drag and drop those components to my existing panel.

   <div class="grid-stack">
        <div class="grid-stack-item" gs-w="4" gs-h="4" gs-x="0" gs-y="0" id="component1" data->
            <div class="nk-block-head-content"> 
                    <h5 class="nk-block-title title">Overview</h5>
                </div>
            <div class="grid-stack-item-content">Component 1</div>
        </div>
        <div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="6" gs-y="0" id="component2">
            <div class="grid-stack-item-content">Component 2</div>
        </div>                
    </div>

.js file

export function loadData(layoutData) {
    alert(layoutData);
     var data = JSON.parse(layoutData);
    // alert("loadData called with data:", data);
    data.forEach(item => {
        var element = document.getElementById(item.id);
        if (element) {
            element.setAttribute('gs-w', item.w);
            element.setAttribute('gs-h', item.h);
            element.setAttribute('gs-x', item.x);
            element.setAttribute('gs-y', item.y);
            console.log(`Updated ${item.id} with width: ${item.w}, height: ${item.h}`);
        }
    });

    // Reinitialize GridStack after updating the elements
    GridStack.init();
}



    export function InitGrid() {
        $(document).ready(function () {
            GridStack.init();
        });
    }