jquery ui中的奇怪偏移可拖动

Question

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

<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