3

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!

fancy
  • 48,619
  • 62
  • 153
  • 231

3 Answers3

5

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

Community
  • 1
  • 1
DarthJDG
  • 16,511
  • 11
  • 49
  • 56
1

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

jeremy
  • 9,965
  • 4
  • 39
  • 59
sleekinteractive
  • 11
  • 1
1

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();
},
Alper Aydingül
  • 251
  • 1
  • 9