Question

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

基本上如果我有一个固定宽度和高度的div然后如果我要用更高宽度向该div内容添加一个元素，那么它将导致一个bug，其中draggable元素超出其包含元件。

我创建了一个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);
}

Answer 2

页脚的宽度[120％]表明它总是超过其父页宽度的20％。

由于您不希望隐藏溢出，可以通过固定页脚大小[以像素为单位]或将其保持在100％或更低来完成。

jQuery draggable离开它的父母

2 个答案: