jquery sortable animate body scroll with item

I have a sortable list. It is very large and goes out of viewport by a considerable amount. Dragging an item from the very bottom to the very top is a clunky process as when the mouse hits the top of the page with the dragged item you need to keep 'jiggling' the mouse in order for the oage to scroll up. To comabt this i added some attributes to the jquery ui scroll function callback as specified in this question JQuery Sortable and automatic scrolling. Unfortuantely this didn't solve my problem and you jiggle the mouse in order to scroll up.

---

Jquery UI sortable demo http://jsfiddle.net/rmSgx/92/

Drag an item from the very bottom to the very top. You will noticew it is clunky.

$(function() {
    $( "#sortable" ).sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 10 });
    $( "#sortable" ).disableSelection();
  });

---

HTML5 demo http://jsfiddle.net/rmSgx/102/

Here's a HTML5 version which is nice and smooth. The problem i have is that i need this behavior with the jquery UI version as it is heavily integrated into my application.

function dragenter(e) {
  if (isbefore(source, e.target)) {
    e.target.parentNode.insertBefore(source, e.target);
  } else {
    e.target.parentNode.insertBefore(source, e.target.nextSibling);
  }
}

function dragstart(e) {
  source = e.target;
  e.dataTransfer.effectAllowed = 'move';
}

---

Jquery UI with scroll function http://jsfiddle.net/rmSgx/105/

Here is a version using jquery UI. It invokes a scroll function when the mouse is at the top. The problem with this is that the dragged item disapears abd you need to jiggle the mouse for it to re-apear.

function forceScrolling(e, ui) {
    var offset = 50;
    if (e.clientY < 100 && ui.position.top > 100) {
      $("html, body").stop().animate({
        scrollTop: 0
      }, 2000);
    } else {
      $("html, body").stop();
    }
  }

Is there anyone that can help in fixing this issue? Thanks.