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

enter image description here

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

I have been looking at jquery ui demo pages, but not so much of help, also searched google with little success — sonam
– sonam, Commented Sep 7, 2012 at 11:00
jQuery.Drag has a scrolls parameter which works (there is a demo on the page). Maybe see how that code works and implement it into jQuerys draggable behavior? — Henrik Ammer
– Henrik Ammer, Commented Sep 7, 2012 at 11:13
Isn't this already handled by scroll: true? Seems to be already doing what you describe in Chrome at least jsfiddle.net/SqNx6 — James Montagne
– James Montagne, Commented Sep 7, 2012 at 15:22
yes it works, then i must be missing some js files. i will edit the post to show what files i have included — sonam
– sonam, Commented Sep 7, 2012 at 16:49

alianos- · Accepted Answer · 2012-09-12 14:54:23Z

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)

answered Sep 12, 2012 at 14:54

alianos-

93610 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alianos- Over a year ago

Its probably also the reason why it works with the fiddle @James Montagne made.

Collectives™ on Stack Overflow

jquery ui draggable scrolling within container

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related