JQuery拖动外部父

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到我的draggable元素的父级来解决我的问题.事实证明,我在链条的某个地方隐藏着继承.

旁注,它看起来像是有效的,因为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 等，看看是否可以显示它。这可能是父 ul 或 div 之一具有“溢出：隐藏”的 CSS 问题。