jquery ui拖放中奇怪的偏移量

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, 150像素宽，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>

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

我已经实现了JQuery UI draggable，它可以将这个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%');
        }  
    }  
    }); 

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.

然而,由于滚动的div,任何低于最初的底部边界的图像#图片,拖时,要远离任何抵消他们的鼠标光标原div。他们仍然得到了正确当鼠标放置在接收div,但是拖图片显示在一个奇怪的地方,直到它被删除。

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.

有人知道怎么改正吗?我假设我必须在onDrag回调中做一些事情来设置被拖动对象的位置与鼠标光标的位置相等，但是我不确定语法应该是什么。

1 个解决方案

#1

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

http://jsfiddle.net/E9pQZ/

http://jsfiddle.net/E9pQZ/

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

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