I am using the jquery-ui `draggable` component with jquery.gantt [here](http://taitems.github.com/jQuery.Gantt/). I could do enable drag on the items easily by `$('.ganttRed').draggable()` but the problem with this is that once we start scrolling the graph left to right using the slider below, the elements that are moved remain where they are instead of scrolling with the graph.

I looked through the source and from my understanding the `margin-left` is being changed during the scrolling; but `jquery-ui` uses the `left` attribute and in the presence of `left` the element keeps its position. My CSS knowledge ends just about there so if any of you are willing to provide any suggestions on how this can be fixed; I will greatly appreciate it. 

I have a created a fiddle demonstrating the problem at: <http://jsfiddle.net/Y2cxa/>. In order to see the behavior I am speaking about:

* Scroll the graph (either with your mouse wheel or the slider at the bottom); things should look and behave as expected.
* Move any of the magenta(-ish) bars around and then scroll.

Again, thank you for your time and any assistance will be greatly appreciated.

Best regards