title: jQuery draggable - how to access the coordinates
body: <p>How can you get access to the dynamically-changing coordinates of a draggable object? I don't just want the coordinates at <code>stop</code>, but a constant stream of position information.</p>
  
  <p>In other words, if I drag <code>object A</code> around, I should be able to get <code>object B</code> to move around in parallel by (1) observing the changes in <code>object A</code> and then (2) applying them to the position of <code>object B</code>.</p>
  
  <p>In this code, I want the red block (<code>obj2</code>) to move with the blue (<code>obj1</code>). </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #obj1 {
     position:fixed;
     top:50px;
     left:50px;
     width: 40px;
     height: 40px;
     background-color: blue;
  }
  #obj2 {
     position:fixed;
     top:150px;
     left:150px;
     width: 40px;
     height: 40px;
     background-color: red;
  }
  &lt;/style&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('#obj1').draggable();
      })
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="obj1"&gt;&lt;/div&gt;
      &lt;div id="obj2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>