jquery ui draggable scrolling within container

Question

I have an unordered list and have added draggable functionality to each of the list item using jquery ui draggable. the list is inside a div with id="content". Here is the snapshot of my UL list

Here is the code i have written:

 <script src="../../jquery-1.8.0.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
 <script type="text/javascript">
$(function() {
    $( ".draggable" ).draggable({ 
        scroll: true,
        scrollSensitivity: 100,
        revert: true,
        containment: '#content',
        zIndex: 999990,
        revertDuration: 100,
        delay: 100 
    });
});
</script>
<div style="width:200px;height:300px;overflow:auto;" id="content">
    <ul>
    <li class="draggable">One</li>
    <li class="draggable">Two</li>
    <li class="draggable">Three</li>
    <li class="draggable">Four</li>
    <li class="draggable">five</li>
    <li class="draggable">six</li>
    <li class="draggable">Seven</li>
    <li class="draggable">Eight</li>
    <li class="draggable">Nine</li>
    <li class="draggable">Ten</li>
    <li class="draggable">Eleven</li>
    <li class="draggable">Twelve</li>
    <li class="draggable">Thirteen</li>
    <li class="draggable">Fourteen</li>
    <li class="draggable">Fifteen</li>
    <li class="draggable">Sixteen</li>
    <li class="draggable">Seventeen</li>
    <li class="draggable">Eighteen</li>
    <li class="draggable">Nineteen</li>
    <li class="draggable">Twenty</li>
      </ul>
 </div>

What I would like to do is when I am dragging any list item within the container (i.e div with id="content") and when the mouse is at the edge of the div border or size, the container should also scroll so that i could move upward and downward within the container.

For example if i wanted drag the last list item in the list to the first in the list, so when the mouse is at the top end of the div edge, the container (in our case div) should also scroll automatically. Is this a bug in jquery ui draggable? Please help

Answer 1

Try downgrading to jQuery 1.7.2

(Its not supposed to work with 1.8 yet I think. You can find the latest compatible version within the rar when you download jQuery UI)