【问题标题】：jQuery draggable - item go over the container on Chrome/SafarijQuery 可拖动 - 项目在 Chrome/Safari 上越过容器
【发布时间】：2011-12-29 14:07:13
【问题描述】：

我有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。

但我真正需要的是在它到达父底部时阻止可拖动元素。我该怎么做？

我认为问题在于 position:absolute item 附加到可拖动项目（.minus 之一；事实上，如果我删除它，一切正常......）

【问题讨论】：

在尝试实现任何内置拖放功能时，我遇到了各种跨浏览器问题。我使用鼠标或触摸滚动了自己的功能，并使其跨浏览器工作，包括移动 webkit。 draggable 不可靠，imo。
这不是解决方案！而重新发明轮子并不是那么好！
我没有说这是一个解决方案 - 这就是为什么我把它放在评论而不是答案中。如果轮子是半圆半方形的，那么重新发明轮子当然适用。内置的拖放功能在浏览器中根本无法正常工作。
是的，但你可以尽可能地调整它......就像我认为的计算机科学中的每件事一样。主要的 jQuery 也不是那么完美...
是的 - 我曾经在网格上拖放效果很好 - 直到 chrome。然后修复它 - 直到移动 Safari。那是我放弃并推出自己的产品的时候。 draggable 在尝试以一种适用于移动设备的方式实现它时特别给了我一个问题 - 没有骰子。我试图在 jsfiddle 中复制您的问题，但它根本没有拖动（Mac 上的 Safari）。

标签： jquery css google-chrome safari drag-and-drop

【解决方案1】：

所以我稍微玩了一下你的代码并想出了一些办法。是的，这是一个修复。

因此，您正在通过可拖动对象的父级 .draggable_container 约束您的可拖动对象。现在，在可拖动中，你有这个从底部延伸一点的减号，这很好，直到它粘在“.draggable_container”的“外面”。除了它没有粘在它外面。减号元素正在扩展 .draggable_container . 现在当你点击然后再次移动 draggable 时，它的父元素暂时变大了，因此它可以进一步向下滚动。每次你向下拖动它一点点，你就扩展了 .draggable_container。

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

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

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

【讨论】：