jQuery Draggable 包含问题，无法将元素拖动到父 div 之外答案

【问题标题】：jQuery Draggable containment issue, cannot drag elements outside parent divjQuery Draggable 包含问题，无法将元素拖动到父 div 之外
【发布时间】：2012-03-07 23:51:31
【问题描述】：

我有一个非常简单的图像管理器，如下所示：

<div id="container">

    <div id="draggable-images">
        <img class="images" src="image1.jpg" />
        <img class="images" src="image2.jpg" />
        <img class="images" src="image3.jpg" />
    </div>

    <div id="droppable-area>
    </div>

</div>

还有 jQuery 来配合它：

        $( ".images" ).draggable({ containment: "#container" });
        $( "#droppable-area" ).droppable();

这是 CSS：

#draggable-images {
    overflow:scroll;
    overflow-x:hidden;
}

.images {
    z-index:10000;
}

图像是可拖动的，但无论容器设置为什么（甚至尝试将其设置为窗口），它们都不会从其父 div 中出来。

有谁知道如何让它工作，或者为什么它不工作？

我已将 z-index 设置得很高，以确保不是问题所在。我也试过在没有滚动条的情况下制作#draggable-images div，它也没有用。

似乎在 jQuery's site 上的工作就像一个魅力，无法弄清楚我错过了什么。

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

$('images').draggable({ appendTo: 'body' });

【讨论】：

这应该是答案。在父 div 上设置滚动条可能是一种设计需求，不应被视为解决问题的首选。
目前我认为这不正确。 jquery docs 建议“仅当辅助选项设置为不使用原始元素时，appendTo 选项才有效。”。在这种情况下没有克隆。
这适用于clone helper 以及用于丢弃项目的 knockoutjs 上下文。请注意，克隆的样式可能与原始元素的样式不同。

【解决方案2】：

从#draggable-images 中删除overflow-x:hidden。我也遇到过类似的问题。

【讨论】：

【解决方案3】：

检查您的 HTML，有问题
移除父级的溢出样式
z 索引？需要吗？

http://jsfiddle.net/LRj9T/1/

【讨论】：

谢谢。但我需要父 div 有滚动条 - 或者这根本不可能？
scrollbars 意味着您有一个受约束的容器（定义的宽度和高度，溢出滚动），这意味着超出的框内的任何内容都会激活滚动（并且内容无法逃脱父级）。一种解决方法是，当您开始滚动时，在拖动时将元素从容器中取出。