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 draggable元素看起来像这样（顶部和左侧值在拖动时改变）：

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

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

Javascript：重新调整时维护父div中元素的位置

1 个答案: