在两个面板之间拖放组件

我在我的DataSource应用程序中使用gridstack.js来定制仪表板组件。 在gridstack()中调整组件大小并拖动组件工作正常。

现在,我想在另一个面板中显示一些组件,并将这些组件拖放到我现有的面板中。

我使用了以下代码,可以看到拖动组件1和2。 问题是组件无法移动。我该如何解决这个问题?

    <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文件

 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);
            }
        });
    });
}