jQuery拖动元素超出父级容器

Question

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

以下是代码：

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

元素是放置在 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>

我相信问题在于它无法离开其父容器，但我不确定该怎么做才能将其移出。

非常感谢您提供任何方向或帮助！

- Andy

Answer 1

我遇到了与之前相同的问题，正如Brendan的回答让我接近解决。设置 appendTo 选项没有帮助，但是我通过给我的可拖动元素的父元素添加 overflow: visible 来解决了问题。结果是，我从上面某处懒散地继承了隐藏。

顺便说一句，看起来这个方法可行，因为jQuery UI通过动态设置相对于父元素的定位来移动可拖动元素 - 这对我来说是新知识！

- Mike Niebling

---

来到这里寻找解决方案...有趣的是，appendTo对我起作用了！ - Matt Skeldon

你能否请提供一些示例代码或 jsfiddle 的链接？ - Amit Kumar Gupta

嗨，阿米特，看看我的 jsfiddle https://jsfiddle.net/rahulvaradkar/w8dsz5qk/。看看第一行，如下所示：<div id="Table_Tree" title="BCP Explorer" style="display:none;overflow: visible">。更改 "overflow: scroll" 或 "overflow: hidden" 并尝试拖动 "Boardwalk Farm"，你会发现不同之处。 - Rahul Varadkar

Answer 2

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

containment: $('#divmain')
helper: 'clone'

分别用于：
- 限定拖放操作的区域
- 在 #divmain 内部但 div 父元素之外显示可见的拖动对象

示例：

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

我希望这能帮助到某个人。

- rfellons

---

辅助程序：“克隆”选项非常有用，因为我有一个 ul 必须保留 overflow: scroll;。谢谢！ - ljs

遇到了同样的问题，这个方法真是太棒了，谢谢你。 - undefined

Answer 3

看起来是以上一些方法的组合对我有用。

设置appendTo：'body'和helper：'clone'。 这样，一个新的DOM对象将作为body的子元素创建，并在任何地方都可见。 这样，您可以随意拖放它。

- Koschi

Answer 4

这看起来像是一个CSS问题。尝试关闭还原功能，这样当你把它拖到只有一半可见时它就会保持在那里。然后在Firebug中调整z-index等参数，看看能否让它显示出来。这可能是由于某个带有“overflow：hidden”的父级ul或div的CSS问题。

- Brendan Heywood

Answer 5

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

appendTo: 'body'

这样做的唯一副作用是，如果您对该项应用了基于其父容器的样式，则这些样式将不会出现在助手中。

- Jason Miesionczek