jQuery在外部父级拖动 [英] JQuery Dragging Outside Parent

问题描述

我正在使用JQuery的draggable();使li元素可拖动.唯一的问题是，将元素拖到其父元素外部时，它不会显示.也就是说，它不会离开其父div的范围.示例如下: http://imgur.com/N2N1L.png -就像z-其他所有内容的索引都具有更高的优先级(并且元素会滑到所有内容的下方).

I'm using JQuery's draggable(); to make li elements draggable. The only problem is when the element is dragged outside its parent, it doesn't show up. That is, it doesn't leave the confines of its parent div. An example is here: http://imgur.com/N2N1L.png - it's as if the z-index for everything else has greater priority (and the element slides under everything).

代码如下:

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

li元素被放置在DIV中，如下所示:

And the li elements are placed in DIVs like this:

<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>

我很肯定这个问题是它不会离开其父容器，但是我不确定该怎么做才能解决该问题.

I'm positive the problem is it won't leave its parent container, but I'm not sure what to do to get it out.

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

Any direction or help would be appreciated GREATLY!

推荐答案

我也遇到了完全相同的问题，进入了该页面，而Brendan的回答使我接近了.设置appendTo选项没有帮助，但是我可以通过将overflow: visible添加到我的可拖动元素的父元素中来解决我的问题.原来我是从链上某个地方偷偷继承了.

I landed on this page with the exact same problem, and Brendan's answer got me close. Setting the appendTo option didn't help, but I was able to resolve my issue by adding overflow: visible to the parent of my draggable element. Turns out I was sloppily inheriting hidden from somewhere up the chain.

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

Side note, it looks like this works because jQuery UI moves the draggable element by dynamically setting positioning relative to the parent - this was new intel for me!

这篇关于jQuery在外部父级拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！