title: Unable to get form's panel x and y coordinates and to set them from a cookie on load
body: <p>I have a form with a panel inside:</p>
  
  <pre><code>&lt;form id="form" action="/accent/login/enter/"&gt;
      &lt;div draggable="true" id="panel" title=""&gt;
      ...
  </code></pre>
  
  <p>The panel is <code>draggable</code> and <code>resizable</code> and has two events:</p>
  
  <pre><code>$('#panel').bind("resize",function(event){
                 saveform();
             })
             .bind("drag",function(event){
                 saveform();
             }); 
  </code></pre>
  
  <p>The function <code>saveform</code> is supposed to save form's panel <code>width</code> and <code>height</code> and besides x and y coordinates. It saves it in a cookie. I want this behaviour, so that when a user refreshes a page, then the form's panel is positioned and aligned according to those properties saved in a cookie. The first problem I face is that x and y coordinates are recalculated only once, that is when a user drags and drop the form for the first time. As for height and width they are recalculated correctly. And the second problem I face is that I'm unable to set x and y coordinates of a form - I do not know whether the method I use is appropriate or not. So, my <code>saveform</code> function looks like this:</p>
  
  <pre><code>var saveform = function(){
      var pos = $('#form:first').offset(), // recalculated only once
      height = $('#panel').height(), // it is saved ok
      width = $('#panel').width(), // it's ok too
      data = {top:Math.round(pos.top),left:Math.round(pos.left),
          height:Math.round(height),width:Math.round(width)};
      $.cookie('form',data);
  }
  </code></pre>
  
  <p>And this is the method I use to set x and y coordinates of the panel:</p>
  
  <pre><code>var data = $.cookie('form');
  $('#panel').position({
          of:$('#body'),
          my:'left top',
          at:'left top',
          offset:data.left + " " + data.top
  })
  </code></pre>