Javascript 使用centerX和centerY属性在另一个div上定位div

我制作了这个东西，我可以生成形状并将它们保存为JSON格式。我计算了centerX和centerY，现在我只想用一个加载按钮将这些形状放回板上的原始位置。我应该为centerX和centerY准确设置什么属性来定位它们

这就是我制作JSON的方式

document.getElementById('save-btn').addEventListener('click', function() {
    var theBoard = document.getElementById('myBoard');
    var boardChildren = theBoard.children;
    var data = {};

    for (var i = 0; i < boardChildren.length; i++) {
        var selectedChild = boardChildren[i];
        var selectedChildID = selectedChild.id;
        var selectedChildStyle = window.getComputedStyle(selectedChild);
        data[selectedChildID] = {};

        var $child = $('#' + selectedChildID);
        var centerX = $child.offset().left + ($child.width() / 2);
        var centerY = $child.offset().right + ($child.height() / 2);

        data[selectedChildID].className = selectedChild.className;
        data[selectedChildID].borderRadius = selectedChildStyle.getPropertyValue("border-radius");
        data[selectedChildID].backgroundColor = selectedChildStyle.getPropertyValue("background-color");
        data[selectedChildID].height = selectedChildStyle.getPropertyValue("height");
        data[selectedChildID].width = selectedChildStyle.getPropertyValue("width");
        data[selectedChildID].marginLeft = selectedChildStyle.getPropertyValue("margin-left");
        data[selectedChildID].marginTop = selectedChildStyle.getPropertyValue("margin-top");
        data[selectedChildID].float = selectedChildStyle.getPropertyValue("float");
        data[selectedChildID].zIndex = selectedChildStyle.getPropertyValue("z-index");
    }

    var jsonString = JSON.stringify(data, null, "\t");

    var file = new Blob([jsonString], {
        type: 'application/json'
    });

    var a = document.createElement('a');
    a.href = URL.createObjectURL(file);
    a.download = 'data.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

}); 

document.getElementById（'save-btn'）。addEventListener（'click'，function（）{
var theBoard=document.getElementById（'myBoard'）；
var boardChildren=theBoard.children；
变量数据={}；
对于（变量i=0；i

---

谢谢

我在这里看不到任何JSON，也看不到任何理由。如果您想“将这些形状放回板上的原始位置”，那么

centerX

和

centerY

的意义是什么？我没有包含生成JSON的代码。这些正是我想要的属性。我的问题是，当我解析json时，我应该将centerX和centerY设置为什么，以便它加载到原始位置如果您想将某个内容放回原始位置，然后记录原始位置（通过

.top

，

bottom

，

left

或

right

属性）在移动元素之前。设置上下左右属性将执行与设置某些中心属性相同的操作。