Gridstack.js Вмешательство в веб-часть SharePoint

Question

Когда я пытаюсь поместить веб-часть SharePoint в перетаскиваемый виджет, созданный из Gridstack.js, я получаю странное взаимодействие, когда веб-часть отображается внутри виджета, но создает «остаточное изображение» при наведении курсора.Исходная веб-часть с показом больше не работает при нажатии и выдает ошибку «Аргумент не имеет выноски, связанной с ним», но можно использовать небольшое «остаточное изображение», которое появляется при наведении курсора.Как это исправить (см. Рисунок ниже)?

Код для превращения веб-части SharePoint в виджет.

var SPItems = ["#MSOZoneCell_WebPartWPQ7"];

    function convertSPToGridstackItem() {
        for (var i = 0; i < SPItems.length; i++) {
            var SPItem = $(SPItems[i]).detach();
            $(SPItem).css("z-index", "999");

            var undraggable = document.createElement("div");
            undraggable.setAttribute("class", "undraggable");
            $(undraggable).append(SPItem);

            var grid = $('.grid-stack').data('gridstack');
            var widget = grid.addWidget(jQuery('<div class="grid-stack-item"><div class="grid-stack-item-content"></div></div>'), 1, 1, 5, 5);
            widget.children("div").append(undraggable);
        }
    }

    function removeDraggable(){ 
        $(".undraggable").draggable( {cancel: "div.not-draggable"} );
    }