jQuery draggable - 项目遍及Chrome / Safari上的容器

Question

我有this代码：

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

现在，在Firefox上没有问题！在Chrome / Safari上，当它到达容器的底部时会阻塞。

然后，如果我点击并再次滚动到底部，则div移动到容器上方。当它获得主容器高度（350px）时，它也会创建“滚动”条。

好吧，为了避免滚动条很容易，只需将overflow:visible;添加到draggable_main_container。

但我需要的是在获得父底部时阻止可拖动元素。我该怎么做？

我认为问题是位置：绝对项目附加到可拖动项目（.minus;实际上如果我删除它，所有工作......）

Answer 1

所以我玩了一下你的代码并想出了一些东西。是的，它是一个修复。

所以你正在通过draggable的父.draggable_container限制你的拖拽。 现在，在draggable中，你有这个从底部延伸一点的东西，这很好，直到它粘在.draggable_container的“外面”。除了它没有粘在它之外。减去元素正在扩展.draggable_container现在当你点击然后再次移动draggable时，它的父元素会暂时变大，因此它可以进一步向下滚动。每次你向下拖动它时，你都会扩展.draggable_container。

现在我不知道为什么这只是一个问题，当你点击但这就是正在发生的事情。

修复是在.draggable_container的底部添加20px的填充。这会阻止.minus元素扩展.draggable_container。

“蓝色标签”之外没有“标签”的影响，但你可以找到另一种方法来模拟它。