Jquery UI Sortable - Div scroll issue

Question

I created a Demo here.

Code:

//Javascript

$(function() {
    $("#panel").sortable({
        items: ".content",
        axis:"y",
        scroll:true,
    }).disableSelection();

});

//HTML

<ul id="panel" class="scroll">
    <li class="content" style="background-color:red">item1</li>
    <li class="content" style="background-color:green">item2</li>
    <li class="content" style="background-color:blue">item3</li>
    <li class="content" style="background-color:gray">item4</li>
    <li class="content" style="background-color:yellow">item5</li>
    <li class="content" style="background-color:green">item6</li>
    <li class="content" style="background-color:yellow">item7</li>
    <li class="content" style="background-color:red">item8</li>    
</ul>

//CSS

.scroll{
    overflow:scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
    position:relative;
}
.content{
    height: 50px;
    width: 100%;
}

In that,When i drag the any box towards down ,it scrolls very long and move out of other boxes. But when i drag any box towards up, it works correctly.

So, is there any way to prevent it from scrolling down long?

Answer 1

Change your style sheet like this:

.scroll {
    border: 1px solid red;
    height: 200px;
    overflow: auto;
    position: static;
    width: 150px;
}

And use this code upper of your ul:

<div style="overflow:hidden;width:150px;height:200px;position:relative">

Answer 2

this isn't much help, but if you check jQuery UI documentation, you'll see that the problem occurs there as well. I'm assuming it's a bug.