JQuery UI Sortable - Div Scrolling Problem

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 this case, when I drag any box down, it scrolls for a very long time and leaves the other boxes. But when I drag any box up, it works correctly.

So, is there a way to prevent prolonged scrolling?

Answer 1

Modify the stylesheet as follows:

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

And use this code at the top of ul :

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

Answer 2

This doesn’t help much, but if you check the jQuery UI documentation , you will see that the problem also occurs there. I guess this is a mistake.