javascript - 保存和加载 div 位置 - 缩放并保存在加载时改变 div 位置

Question

所以我有一堆绝对覆盖的 div。用户通过在叠加层上拖动来创建方形 div。如果您要创建一个 div，然后放大和缩小，div 会保持在同一位置，因为它对叠加层是绝对的，如前所述。

然而问题就出在这里。您可以将 div 位置(顶部、左侧、高度、宽度)保存到 .json 并加载 .json 以显示您之前保存的所有 div。这工作正常....如果您保存和加载相同的浏览器缩放百分比。

例如，如果您要在 150% 缩放时绘制 div，并尝试在 100% 缩放时加载 div 的位置，则位置会发生变化(以弥补我假设的缩放)。

我尝试在保存时强制将窗口缩放到 100%，但这没有用，我现在有点卡住了。有人有什么建议吗？

Answer 1

按照亚历克斯关于使用百分比的建议，我能够想出一个完美的解决方案。

在设置 div 顶部和左侧的方法中 - 我将其从相对于父级的像素更改为相对于父级的百分比。

所以这个

{
   width = endX - startX;
   left = startX;

   height = endY - startY;
   top = startY;
}

变成了这个

{
    width = endX - startX;
    var percentageLeft = startX / parent.offsetWidth * 100;
    left = percentageLeft;

    height = endY - startY;
    var percentageTop = startY / parent.offsetHeight * 100;
    top = percentageTop;
}

然后通过更改保存/加载以查找百分比而不是像素，我能够完成这项工作!