Scroll is going down when I use sortable

Question

I have these js files:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://code.jquery.com/ui/1.8.18/jquery-ui.min.js
Functions.js

and this html:

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

in Functions.js, I have:

$(function () {
    $("#sortable").sortable({
        cancel: ".fixed"
    });
    $("#sortable").disableSelection();
});

in my jsfiddle, it works:

http://jsfiddle.net/alonshmiel/ZV6sF/1/

but in my project, when I try to choose li and order it after another li, the scroll is going down till the bottom of the page.

is there someone that has an idea why it's happening?

any help appreciated!

Answer 1

You could set the containment option for the sortable, so that the list elements can only be dragged within their container. For example:

$(function () {
    $("#sortable").sortable({
        cancel: ".fixed",
        containment: "#sortable"
    });
    $("#sortable").disableSelection();
});