Whenever you attempt to drag an image that you need to scroll down to see (anything not visible on first load) the image gets shot up to the top of the page instead of staying with the cursor. This only happens in Chrome or Safari, works great in Firefox. I've tried methods outside of Draggable to fix this issue, but they just lead to additional problems.
Here's the simplest version of the desired code, I just can't find the right classes to use, but the answer must be somewhere here
$( "img" ).draggable({ stack: "img" });
I believe it's using jquery-ui-1.10.0.custom.min.js for the drag function.
So pretty much it doesn't know how to readjust the Y placement of an image outside of the initial window container, and I can't for the life of me figure out how to make that happen.
Changing image position from relative to absolute helps. But I think you should try to make draggable not an image, but its parent div. So:
$(".photo").draggable({ handle: "img", stack: ".photo" });