Question

我正在使用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>

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

任何方向或帮助都会非常感激！

Answer 1

我在这个页面上遇到了完全相同的问题，Brendan的回答让我很接近。设置appendTo选项没有帮助，但我能够通过将overflow: visible添加到我的可拖动元素的父级来解决我的问题。事实证明，我在链条的某个地方隐藏着隐藏的遗产。

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

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

我希望这有助于某人。

Answer 3

看起来上面的一些组合为我做了。

设置appendTo: 'body'和helper: 'clone'。这样，一个新的DOM-Object将被创建为身体的子对象，随处可见。这样你就可以随意拖动（和放下）它。

Answer 4

这看起来像是一个CSS问题。尝试关闭恢复，以便在将其拖动到半可见的位置时保持不变。然后在Firebug中使用z-index等进行播放，看看是否可以显示它。它可能是一个css问题，其中一个父ul或div的'溢出：隐藏'。

Answer 5

我有一个类似的问题，并通过设置选项解决它：

appendTo: 'body'

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

JQuery拖动外部父

5 个答案: