Javascript:重新缩放时保持元素在父 div 中的位置

Question

我试图在元素被拖放(使用 Top 和 Left)后保存它的位置，然后在重新加载时将其正确放置(即使父容器具有不同的大小)。

现在我正在做的是让用户在父级 (#diagram-editor-canvas) 中四处移动元素，然后在保存时我将顶部和左侧的像素值转换为百分比，使用:

  var w = $("#diagram-editor-canvas").width();
  var h = $("#diagram-editor-canvas").height();
  var Xpercent = parseInt(span.style.left.split('p')[0]) / w * 100;
  var Ypercent = parseInt(span.style.top.split('p')[0])  / h * 100;

span 是我拖动的元素。我的想法是，如果父容器大小发生变化，则百分比的使用应确保元素始终位于正确的位置。可悲的是，这似乎不起作用？在重新加载页面并使用保存的百分比定位元素时，我的元素似乎随机放错了位置。我错过了什么吗？有没有我应该考虑的抵消？

我的 span 可拖动元素看起来像这样(顶部和左侧的值在拖动时发生变化):

top: 251px;
left: 348px;
position: absolute;
z-index: 1000;
transform: translate3d(0px, 0px, 0px);
-webkit-user-select: none;
touch-action: none;
cursor: move;

虽然我的父容器具有这些属性:

margin: 20px;
background-repeat: no-repeat;
background-image: url(/uploads/schematics/3.png);
background-size: contain;
position: relative;

有什么想法吗？我很茫然

Answer 1

我太傻了，在计算保存百分比和以不同尺寸预览容器时，我忘记计算容器的新纵横比高度。