Theres an issue with jQuery UI sortable/draggable, where if the element being dragged is centered using margin:0 auto, the dragging begins on the left side of the container rather than the center where the element really is.
Heres a demo to show what I mean: http://codepen.io/anon/pen/YqWRvV. Simply drag the red square.
If you remove margin:0 auto from the '.drag' element, you will see that the dragging starts normally.
How can I fix this issue and have my element drag from where it really is when centering using margin:0 auto?
This seems to happen in Google Chrome.
$("#c").sortable();
`.drag {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: red;
}`
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'.
Wrapping the draggable in a container fixes the issue, but HTML changes isn't a solution I'm looking for.
UPDATE: 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. http://codepen.io/anon/pen/YqWRvV. I'm wondering if this bug has been reported.
SOLUTION http://codepen.io/anon/pen/MyjeJP Thanks to Julien Grégoire Note: This solution may need a way to refresh the helper position.