Question

我有一个主要的div，150px宽，500px高，有一个自动（或滚动）的溢出，它持有一堆图像，因此：

<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

在jquery ui draggable中的奇怪偏移

1 个答案: