Here's the original:

http://subcog.net/croptool2/layer_test.html

Here's the jquery version

http://subcog.net/croptool3/layer_test_jquery.html

There's 3 layers that comprise the crop utility.  On the bottom is simply the photo itself.  On top of that is a semi-transparent layer to give a darkening effect.  The top layer is a smaller div, with the photo as the background, and I'm using background-position to offset it to match the bottom layer.  So its sort of a fake "window" effect.  So whenever I drag the box around, the background-position needs to update properly, or else I get a wobble effect.

Here's the code when I assign the draggable property.

2. $("#image").draggable({ 
3.         containment: "#image_container", 
4.         drag: function() 
5.             {
6.             $('#image').css('backgroundPosition' , '-'+ $('#image').position().left+'px ' + '-'+ $('#image').position().top+'px ');
7.             },
8.     });
9. });

My hypothesis is that the drag function is called to run in the background, while the user continues to drag the box around.  Thus if the drag function doesn't update fast enough, then the background-position may not be updating soon enough to match the new position of the box.

Does anyone have any ideas for how I might fix this?