CODEWITHSUNDEEP
jqueryjquery-ui
Linas
Linas

Reputation: 4408

jQuery draggable goes out of it's parent

I have found a really annoying bug which i can't fix.

Basically if I have a div with fixed width and height and then if I would add one more element to that div content with higher width it would cause a bug where draggable element goes out of its containing element.

I have created a jsFiddle here

To make this bug happen simply drag draggable div to the right side of container and then try dragging it out the container again and it will go out by around 10px, if the process is repeated it can go out as much as you want.

One way I found to if it is by adding overflow hidden to the draggable element, but in my case I need content to be visible no matter what.

JS:

$( "#draggable" ).draggable({
    containment: "parent"
});

HTML

<div class="container">
    <div id="draggable" class="ui-widget-content">
        <p>Drag me around</p>
        <div class="footer"></div>
    </div>
</div>

CSS

.container{
    width:400px;
    height: 400px;
    border:1px solid red;
}

#draggable{
    width: 100px;
    height: 200px;
}

.footer{
    width: 120%;
    height :10px;
    background: blue;
}

Upvotes: 3

Views: 1665

Answers (2)

Arpit
Arpit

Reputation: 12797

So you need to do this manually

first add the drag start event and compare 

if($('.container').position.left+$('.container').width ==
$('.draggable').position.left+$('.draggable').width{
event.preventDefault();  //cancel the drag.
//reset the position of draggable to 1 less then the current
$('#draggable').css('left',$('#draggable').css('left')-3);
}

Upvotes: 2

Janak
Janak

Reputation: 5052

The width[120%] of footer suggests that it will always exceed 20% than its parent's width.

As you do not want overflow to be hidden, This can be done by either fixing the size of the footer [in pixels] or by keeping it @ 100% or less.

Upvotes: 1

Related Questions