title: Append table with position is not exactly showing where it was
body: <p>I am developing a website with Jquery-ui draggables. In the parent div block &quot;container&quot; there are many child draggables which allows user to freely move around the div block.</p>
  <pre><code>    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;draggable ui-widget-content&quot; id=&quot;1&quot;&gt;Table 1&lt;/div&gt;
        &lt;div class=&quot;draggable ui-widget-content&quot; id=&quot;1&quot;&gt;Table 2&lt;/div&gt;
        ...
      &lt;/div&gt;
  </code></pre>
  <p>I implemented a save function which saves the position of each div block as a json string. It stores the position of the draggables and their IDs. So it can be loaded with where they were at last time.</p>
  <blockquote>
  <p>[{&quot;id&quot;:&quot;1&quot;,&quot;left&quot;:&quot;256&quot;,&quot;top&quot;:&quot;226&quot;},{&quot;id&quot;:&quot;2&quot;,&quot;left&quot;:&quot;256&quot;,&quot;top&quot;:&quot;632&quot;},{&quot;id&quot;:&quot;3&quot;,&quot;left&quot;:&quot;1330&quot;,&quot;top&quot;:&quot;226&quot;},{&quot;id&quot;:&quot;4&quot;,&quot;left&quot;:&quot;1330&quot;,&quot;top&quot;:&quot;632&quot;},{&quot;id&quot;:&quot;5&quot;,&quot;left&quot;:&quot;818&quot;,&quot;top&quot;:&quot;417&quot;}]</p>
  </blockquote>
  <p>Here's the problem:</p>
  <p>I loaded the data from json. It turns out all the position is all wrong.</p>
  <p>I recreated using JSFiddle to address the issue: <a href="https://jsfiddle.net/braveminds1823/wcmxL2bj/3/" rel="nofollow noreferrer">https://jsfiddle.net/braveminds1823/wcmxL2bj/3/</a></p>
  <p>Before saving
  <a href="https://i.stack.imgur.com/f3VmE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3VmE.png" alt="Before saving" /></a></p>
  <p>After saving, loading the position from json
  <a href="https://i.stack.imgur.com/W6w2O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W6w2O.png" alt="Loading the position from json" /></a></p>
  <p>Edit: I know setting the position to absolute works, but since my website is responsive. The draggables will break out from the container and cover up the web content</p>