title: Draggable And Margin:0 auto;
body: <p>Theres an issue with jQuery UI sortable/draggable, where if the element being dragged is centered using <code>margin:0 auto</code>, the dragging begins on the left side of the container rather than the center where the element really is.</p>
  
  <p>Heres a demo to show what I mean: <a href="http://codepen.io/anon/pen/YqWRvV" rel="nofollow">http://codepen.io/anon/pen/YqWRvV</a>. Simply drag the red square.</p>
  
  <p>If you remove <code>margin:0 auto</code> from the '.drag' element, you will see that the dragging starts normally.</p>
  
  <p>How can I fix this issue and have my element drag from where it really is when centering using <code>margin:0 auto</code>?</p>
  
  <p>This seems to happen in Google Chrome.</p>
  
  <p><code>$("#c").sortable();</code></p>
  
  <pre><code>`.drag {
     margin: 0 auto;
     width: 200px;
     height: 200px;
     background-color: red;
  }`
  </code></pre>
  
  <p>centering the element with CSS 'calc' fixes the issue, but my elements width can change dynamically. Also 'calc' isn't as well supported as 'margin'.</p>
  
  <p>Wrapping the draggable in a container fixes the issue, but HTML changes isn't a solution I'm looking for.</p>
  
  <p><strong>UPDATE:</strong>
  So this isn't a jQuery bug. It's a bug with google chrome. Apparently the wrong position is retrieved by chrome, and so jQuery starts the drag from where chrome tells it where the element is. I output the left position of the element in the console and you can see that it's 13px when it clearly isn't. <a href="http://codepen.io/anon/pen/YqWRvV" rel="nofollow">http://codepen.io/anon/pen/YqWRvV</a>. I'm wondering if this bug has been reported.</p>
  
  <p><strong>SOLUTION</strong>
  <a href="http://codepen.io/anon/pen/MyjeJP" rel="nofollow">http://codepen.io/anon/pen/MyjeJP</a> Thanks to Julien Grégoire
  Note: This solution may need a way to refresh the helper position.</p>