5
我有一个主要的div，150像素宽乘500像素高的偏移，具有自动（或滚动）的溢出被保持一堆图像，从而：怪异在jQuery用户界面可拖动
<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相当远。当鼠标放置在接收格上时，它们仍会正确放置，但拖动的图像显示在奇怪的地方，直到它被丢弃。
任何人都知道一种方法来纠正？我假设我必须在onDrag回调中做些事情来设置拖动对象的位置与鼠标光标位置相等，但我不确定语法应该是什么。