Javascript：在重新調整尺寸時保持元素在父div中的位置

Question

我試圖在拖動和放下元素之後（使用Top和Left）保存元素位置，然後在重新加載時將其正確放置（即使父元素容器具有不同的尺寸）。

眼下什麼Im做是我讓用戶在父四處移動元素（＃圖編輯器畫布），然後在保存我轉換的頂部和左側的像素值，以百分比使用：

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; 

跨度是我拖動的元素。我的想法是，如果父容器大小發生變化，使用百分比應該確保元素總是在正確的位置。可悲的是，這似乎並沒有工作？我的元素似乎在重新加載頁面和使用保存的百分比定位元素時會隨機錯位。我錯過了什麼嗎？有沒有，我應該考慮抵消？

我跨度拖動元素看起來是這樣的（上拖動改變頂部和左側值）：

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

我當時很傻，忘了計算容器的新高寬比高度，當計算保存百分比和預覽不同大小時。