Not all items sortable with Scriptaculous, Sortables, scroll and overflow

Question

I'd like to have a scrollable container with overflow:scroll in which a sortable list is contained, like so:

<div id="container" style="overflow: scroll; width: 200px; height: 100px;"> 
<ul id="fruit"> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Peach</li> 
    <li>Strawberry</li> 
    <li>Cherry</li> 
    <li>Pear</li> 
    <li>Orange</li> 
    <li>Mango</li> 
</ul> 
</div> 

and doing:

Sortable.create('fruit', { 
"scroll": "container" 
}) 

This works as long as I choose an item from the visible part of the list and if I drop it into the visible part.

If I choose an item from the visible part and try to drop it within the invisible region (after scrolling) the other items just don't "make room" for it.

If I scroll down and choose an item from the initially invisible part and scroll with it to the initially visible part, it is droppable between the initially visible items.

Using Prototype 1.6.0.3 and Scriptaculous 1.8.2.

For contrast...what I'm talking about is working in this YUI example .

Answer 1

In the scriptaculous documentation , it says to include Position.includeScrollOffsets = true; above your Sortable.create definition.

You can view a working example here.