<ul> with overflow-y: auto and <li>s with relative position behaves oddly

Question

I've the following mark up

<div class="row-fluid">
    <div class="span4">
        <ul class="test">
            <li>Arun</li>
            <li>Krishna</li>
            <li>Soundar</li>
        </ul>
    </div>
</div>

And css

.test {
    height: 500px;
    margin-top: 10px;
    overflow-y: auto;
    padding: 10px 4px 70px;
}

And script

$('.test li').draggable({
    revert: 'invalid'
})

If you drag the items to the right side, it disappears, I don't know why it is behaving so.

If the overflow-y: auto; style is removed from .test it works fine.

Demo: Fiddle
You may have to increase the width of the preview tab because of the responsive css to replicate the issue in the fiddle

Answer 1

I know this is an old question, but I think I found an answer. The reason the list disappears is because you drag it off the edge of the div and it begins to auto scroll. So, you you just remove it from the flow of the page when it is clicked on, like so:

$('.test li').draggable({
    revert: 'invalid'
}).mousedown(function() {
    var that = $(this);
    //create div to fill the vacated space
    $div = $('<div></div>');
    $div.width(that.width());
    $div.height(that.height());
    $div.insertAfter(that);
    //remove from flow of the page, set a different background color to see it work
    that.css({'position':'absolute'});
});

New fiddle here