Question

I have this code :

HTML

<div class="draggable_main_container">
    <div class="draggable_container">
        <div class="draggable">
            <div class="minus">
                label
            </div>
        </div>
    </div>
</div>

CSS

.draggable_main_container
{
    width:134px;
    overflow:auto;
    position:relative;
    height:350px;
}

.draggable_container
{
    height:300px;
    position:relative;
    overflow:visible; 
    background-color:blue;  
}

.draggable
{           
    background-color:red;
    height:134px;
    width:134px;
    cursor:pointer;
    position:relative;
}

.draggable .minus
{
    position:absolute;
    left:50px;
    bottom:-20px;    
    width:32px;
    height:20px;  
    background-color:yellow;  
}

jQuery

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

now, on Firefox there is no problems! On Chrome/Safari, it blocks when it get the bottom of the container.

Then, if I click and I scroll again to the bottom, the div move over the container. When it gets the main container height (350px) it also create the "scrolls" bars.

Well, to avoid the scroll bars is easy, just add overflow:visible; to draggable_main_container.

But what I need is really to block the draggable element when it get the parent bottom. How can I do it?

I think the problem is the position:absolute item attacched to the draggable item (the .minus one; in fact if I remove it, all works…)

Answer 1

so I played around with your code a little and figured something out. And yes, its a fix.

So you are constraining your draggable by the draggable’s parent .draggable_container.
Now, in draggable, you have this minus thing that extends a bit from the bottom, which is fine until it sticks “outside” of .draggable_container”. Except that it isn’t sticking outside of it. The minus element is extending .draggable_container. Now when you click and then move draggable again, its parent element is temporarily bigger and thus it can scroll down further. Each time you drag it down a little more you’re extending .draggable_container.

Now I don’t know why this is only an issue when you click but that’s what’s happening.

The fix is to add 20px of padding to the bottom of .draggable_container. This stops the .minus element from extending .draggable_container.

You don’t have the little effect of the “label” going outside the blue box but you can find another way to simulate this.