幅150px、高さ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>
このdivから別のdivに画像をドラッグしてドロップするためにドラッグ可能なJQueryUIを実装しました。
$('#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コールバックで何かを行う必要があると思いますが、構文がどうあるべきかわかりません。