jQuery拖到父级之外答案

【问题标题】：JQuery Dragging Outside ParentjQuery拖到父级之外
【发布时间】：2010-04-16 21:43:50
【问题描述】：

我正在使用 JQuery 的 draggable();使 li 元素可拖动。唯一的问题是当元素被拖到其父元素之外时，它不会显示出来。也就是说，它不会离开其父 div 的范围。这里有一个例子：http://imgur.com/N2N1L.png - 好像其他所有内容的 z-index 具有更高的优先级（并且元素在所有内容下滑动）。

代码如下：

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

li 元素像这样放置在 DIV 中：

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

我很肯定问题是它不会离开它的父容器，但我不知道该怎么做才能把它拿出来。

任何方向或帮助将不胜感激！

【问题讨论】：

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

【解决方案1】：

我以完全相同的问题登陆此页面，而 Brendan 的回答让我很接近。设置appendTo 选项没有帮助，但我能够通过将overflow: visible 添加到我的可拖动元素的父级来解决我的问题。原来我是草率地从链条上的某个地方继承隐藏的。

旁注，看起来这是可行的，因为 jQuery UI 通过动态设置相对于父级的定位来移动可拖动元素 - 这对我来说是新的英特尔！

【讨论】：

来到这里寻找解决方案......奇怪的是 appendTo 为我工作！
能否请您发布一些示例代码是 jsfiddle 等的链接？
嗨，阿米特，看看我的 jsfiddle jsfiddle.net/rahulvaradkar/w8dsz5qk 看看行号 #1
更改“溢出：滚动”或“溢出：隐藏”并尝试拖动“Boardwalk Farm”。你会得到不同的。

【解决方案2】：

我也遇到了同样的问题。
你可以使用这个选项

遏制：$('#divmain')
助手：'克隆'

分别为
- 定义放置动作的限制区域
- 用于显示可见的拖动对象也在 div 父级之外但在 #divmain 内

例子

<div id="divmain">
  <div id="divparentdraggable">
    <div id="divdraggable"></div>
  </div>
  <div id="divparentdroppable">
    <div id="divdroppable"></div>
  </div>
</div>

jquery 代码：

$('divparentdraggable').draggable({ 
...
containment: $('#divmain'),
helper: 'clone',
...
});

我希望这对某人有所帮助。

【讨论】：

伙计，你拯救了我的一天！谢谢。
helper: 'clone' 选项非常有用，因为我有一个 ul 必须保留 overflow: scroll;。谢谢！

【解决方案3】：

看起来上面的一些组合对我有用。

设置appendTo: 'body' 和helper: 'clone'。这样，一个新的 DOM-Object 将被创建为 body 的子对象，它在任何地方都可见。这样您就可以将它拖放到您喜欢的任何地方。

【讨论】：

【解决方案4】：

这看起来像是一个 CSS 问题。尝试关闭还原，以便在将其拖动到一半可见的位置时保持原位。然后在 Firebug 中使用 z-index 等，看看是否可以显示。这可能是父 ul 或 div 之一的 CSS 问题，带有“溢出：隐藏”。

【讨论】：

【解决方案5】：

我遇到了类似的问题，通过设置选项解决了：

appendTo: 'body'

唯一的副作用是，如果您根据其父容器将样式应用于项目，则这些样式将不会出现在帮助程序上。

【讨论】：