jQuery draggable : the draggable box go over the container - bug?

Question

Try this code :

HTML

<div class="draggable_container">
    <div id="draggable_1" class="draggable">
        <div class="exp"><!-- --></div>
    </div>
</div>

CSS

html
{
    height:3000px;
}

.draggable_container
{
    height:300px;
    background-color:red;
    width:140px;
}

.draggable
{
    height:60px;
    width:130px;
    cursor:pointer;
    border:5px solid #000000;
    background-color:#ffffff;
}

jQuery

$(".draggable").draggable({
    axis: "y",
    containment: 'parent'
});

Now, if you click on the box "draggable" and you move the mouse up and down, it will move till the container height.

But, if you click with the mouse to this box, and you scroll the page (with the mouse wheel...or moving the cursor to the bottom, without release the mouse) the box go over the container. And this sucks.

Is it a common bug? How can I fix this trouble?

Answer 1

I don't know if this is a bug, but I solve it by adding overflow:auto to the .draggable_container css class. See it here: http://jsfiddle.net/QhVNr/2/