3

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;
}
4

2 回答 2

2

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);
}
于 2013-05-31T09:26:48.487 回答
1

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.

于 2013-05-31T09:09:02.103 回答