jQuery UI中的奇怪偏移量可拖动

Question

我有一个主div，宽150像素x高500像素，其中有自动（或滚动）溢出功能，其中包含一堆图像，因此：

<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>

我已经实现了可拖动的JQuery UI，以将图像从该div中拖动到另一个div中并将其拖放。

$('#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%');
        }  
    }  
    }); 

但是，由于div上的滚动，在拖动#images的初始底部边框以下的任何图像时，它们与鼠标光标的距离都将与原始div中的偏移量有很大的距离。 当鼠标放在接收div上时，它们仍然会正确掉落，但是拖动的图像会显示在一个奇怪的地方，直到被放下为止。

有人知道纠正此问题的方法吗？ 我假设我必须在onDrag回调中做一些事情，以将被拖动对象的位置设置为与鼠标光标位置相等，但是我不确定语法应该是什么。

Answer 1

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

http://jsfiddle.net/E9pQZ/

请参阅API文档http://api.jqueryui.com/draggable/#option-cursorAt