jQuery UI draggable position being affected by scrollTop? (JSFiddle Included)

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 docume开发者_Go百科nt 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!

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

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

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();
},