JQuery 拖动到父级之外

Question

我正在使用 JQuery 的draggable();使 li 元素可拖动。唯一的问题是当元素被拖到其父元素之外时，它不会显示。也就是说，它不会离开其父 div 的范围。一个例子在这里： https://i.sstatic.net/jo6tC.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>

我确信问题是它不会离开其父容器，但我不知道该怎么做才能将其取出。

任何指导或帮助将不胜感激！

Answer 1

我带着完全相同的问题登陆此页面，布伦丹的回答让我很接近。设置 appendTo 选项没有帮助，但我可以通过将 overflow:visible 添加到可拖动元素的父级来解决我的问题。事实证明，我是从链条上游的某个地方草率地继承了隐藏的东西。

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

Answer 2

我也遇到了同样的问题。
您可以使用此选项

包含：$('#divmain')
helper: 'clone'

分别用于
- 定义下降动作的限制区域
- for 显示可见的拖动对象也在 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',
...
});

我希望这对某人有帮助。

Answer 3

看起来上面的一些组合对我来说是这样的。

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

Answer 4

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

Answer 5

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

appendTo: 'body'

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