Странное смещение в jquery ui draggable

У меня есть основной div шириной 150 пикселей и высотой 500 пикселей с переполнением auto (или scroll ), который содержит кучу изображений, таким образом:

<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, который можно перетаскивать, чтобы перетаскивать изображения из этого 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 любые изображения, которые находятся ниже начальной нижней границы изображений #, при перетаскивании значительно удаляются от курсора мыши независимо от смещения, которое они имели в исходном div. Они по-прежнему корректно отбрасываются, когда мышь находится над принимающим div, но перетаскиваемое изображение отображается в странном месте, пока оно не будет отброшено.

Кто-нибудь знает способ исправить это? Я предполагаю, что мне нужно что-то сделать в обратном вызове onDrag, чтобы установить положение перетаскиваемого объекта равным положению курсора мыши, но я не уверен, каким должен быть синтаксис.

5
задан rosalindwills 5 August 2012 в 16:40
поделиться