title: jQuery - draggable div with zoom
body: <p>This is my code:</p>
  
  <p><a href="http://jsfiddle.net/652nk/" rel="noreferrer">http://jsfiddle.net/652nk/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="canvas"&gt;
      &lt;div id="dragme"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#canvas {
      width:500px;
      height:250px;
      border:1px solid #444;
      zoom:0.7;
  }
  #dragme {
      width:100px;
      height:50px;
      background:#f30;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function(){
      $('#dragme').draggable({containment:'parent'})
  })
  </code></pre>
  
  <p>I have a major issue when using css <code>zoom</code> property. Position of target draggable div is not coordinated with cursor position.</p>
  
  <p><strong>Is there any clean and simple solution?</strong> I should be able to change zoom dynamically.</p>