Not all items are sorted using Scriptaculous, Sortables, Scrolling, and Overflow

I would like to have a scrollable container with overflow: scroll that contains a sortable list, for example:

<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 execute:

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

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

If I select an element from the visible part and try to remove it inside the invisible area (after scrolling), other objects simply do not "make room" for this.

If I scroll down and select an element from the originally invisible part and scroll it to the originally visible part, it is inaccessible between the initially visible objects.

Using Prototype 1.6.0.3 and Scriptaculous 1.8.2.

For comparison ... what I'm talking about works in this YUI example .

+3

Source: https://habr.com/ru/post/1719963/


All Articles