Weird offset in jquery ui draggable

Question

I've got a main div, 150px wide by 500px tall, with an overflow of auto (or scroll) which is holding a bunch of images, thus:

<div id="images" style="width: 150px; height: 500px; overflow: scroll;">
    <img src="images/swift1.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift2.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift3.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift4.jpg" style="width: 150px; height: 150px;" />
    <img src="images/swift5.png" style="width: 150px; height: 150px;" />
    <img src="images/swift6.JPG" style="width: 150px; height: 150px;" />        
</div>

I've implemented JQuery UI draggable to drag images out of this div into another div and drop them.

$('#images img').draggable({  
    revert:true,  
    proxy:'clone',
    snap: true,
    onDrag: function(e, ui) {
        console.log('test');
    }
}); 
$('.drop_image').droppable({  
    onDragEnter:function(){  
        $(this).addClass('over');       
    },  
    onDragLeave:function(){  
        $(this).removeClass('over');  
    },  
    onDrop:function(e,source){  
        $(this).removeClass('over');  
        if ($(source).hasClass('assigned')){  
            $(this).append(source);  
        } else {  
            var c = $(source).clone().addClass('assigned');  
            $(this).empty().append(c);  
            c.draggable({  
            revert:true  
            });  
        $(this).children('img').css('width', '100%').css('height', '100%');
        }  
    }  
    }); 

However, because of the scroll on the div, any images which are below the initial bottom border of #images, when dragged, are considerably away from the mouse cursor by whatever offset they had in the original div. They still get dropped correctly when the mouse is placed over the receiving div, but the dragged image displays in a weird place until it is dropped.

Anyone know a way to correct this? I assume I have to do something in the onDrag callback to set the position of the dragged object to be equal with the mouse cursor position, but I'm not sure what the syntax should be.

Answer 1

cursorAt: { left: 75, top: 75 },

http://jsfiddle.net/E9pQZ/

see the API docs http://api.jqueryui.com/draggable/#option-cursorAt