jQuery Draggable 脱离了它的父级

Question

我发现了一个非常烦人的错误，但我无法修复。

基本上，如果我有一个具有固定宽度和高度的 div，然后如果我向该 div 内容添加一个具有更高宽度的元素，则会导致可拖动元素超出其包含范围的错误元素。

我创建了一个jsFiddle here

要使此错误发生，只需将可拖动的 div 拖到容器的右侧，然后尝试再次将其拖出容器，它会向外拖出大约 10px，如果重复该过程，它可以随心所欲地拖出.

我发现的一种方法是向可拖动元素添加隐藏的溢出，但在我的情况下，无论如何我都需要内容可见。

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

Answer 1

所以你需要手动执行此操作

首先添加拖动start事件并比较

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