jQuery UI 可拖动 position 受 scrollTop 影响？ （包括 JSFiddle）

Question

http://jsfiddle.net/mgJf2/2/

After including jQueryUI the only javascript is:

$("#scrollbox").draggable({
    axis: 'y',
    drag: function(event, ui) {
         $(document).scrollTop(ui.position.top);
    },
});

The document scrolling has compounding effect on the drag-able div (which I thought had a fixed position). It causes the scroll to run away. Take out the document scrolling and it works fine, just without that page scrolling I want.

Any ideas?

Thanks!

Answer 1

Here is the bug report, there is no fix yet: http://bugs.jqueryui.com/ticket/5009

There is another known bug in jQuery UI without an official fix so far, fix is scheduled to version 1.9. There are a few ways to work around it, ranging from simple to ugly hack, check out my response over here: jQuery draggable shows helper in wrong place after page scrolled

Answer 2

I found that using a function on drag (fires onmousemove ) you can offset the position of helper. You have to target helper in the example posted - I would imagine you would just substitute ui.item for ui.helper .

drag: function(event, ui) { 
    var offset = $(this).offset();
    var yPos = offset.top; 
    ui.helper.css('margin-top', $(window).scrollTop() + 'px');
}

This should fix the position when document scrolled in Chrome and Safari. Mozilla was the only Browser working correctly without this fix. Have not tested on IE.

Cheers

Answer 3

Keep it simple. Here is my Solution and it works fine.

drag: function(event, ui) { 
    ui.helper.css('margin-top', -(t-c.scrollTop()));
},
start: function( event, ui ) {
    t = c.scrollTop();
},