Drag and drop component between two panels

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.

I used following code and can see the Drag component 1 and 2.The issue is the components can't move. How can I resolve this?

<div class="col-lg-3"><div class="draggable-components-panel"><div class="draggable-component" id="dragComponent1">Drag Component 1</div><div class="draggable-component" id="dragComponent2">Drag Component 2</div></div></div><div class="col-lg-9"><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></div>

.js file

 export function loadData(layoutData) {                    var data = JSON.parse(layoutData);        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 () {        const grid = GridStack.init();        // Make the grid items draggable and resizable        $('.grid-stack').gridstack({            draggable: {                handle: '.grid-stack-item-content'            }        });        // Initialize draggable components        $('.draggable-component').draggable({            revert: "invalid",            helper: "clone",            start: function (event, ui) {                $(ui.helper).addClass("grid-stack-item");            }        });        // Initialize the droppable area (GridStack)        $('.grid-stack').droppable({            accept: '.draggable-component',            drop: function (event, ui) {                const item = $(ui.helper).clone();                const grid = GridStack.init();                const node = {                    x: 0,                    y: 0,                    width: 2,                    height: 2                };                grid.addWidget(item, node);            }        });    });}