JQuery UI Draggable手动设置位置失效问题求助

我已将偏移量X和Y保存至localStorage并取出，传入以下函数：

function SetPositionForId(id, posX, posY) {
    $("#" + id).offset({ left: posX, top: posY });
}

我已确认能找到目标元素，但无法手动设置其位置。尝试过设置offset、jQuery UI的position、CSS的top和left属性，且posX与posY的值均正确。

拖拽组件的配置如下：

function MakeDraggableGrid() {
    $('.draggable').draggable({
        containment: "parent",
        grid: [300, 300]
    });
}

三个组件当前的坐标值：

x和y: 582 - 47.59375
x和y: 282 - 347.59375
x和y: 282 - 647.59375

检查器中看到的HTML结构如下：

<div id="WidgetContainer" class="position-relative">
    <div id="d77b5dd4-4436-4c25-ba3b-5425f7d41d04" class="draggable border rounded ui-draggable ui-draggable-handle" style="width: 300px; height: 300px; position: relative;">
        <div class="w-100 h-25 bg-primary p-2 pt-4">
            <h5 class="text-white">Widget #1</h5>
            <button class="btn btn-danger oi oi-x position-absolute align-self-end end-0"></button>
        </div><!--!-->
        <div class="w-100 h-75 bg-light p-2 border-primary">
            <p>eerste</p>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Parrotmaster