Question

我有两个已连接的可排序列表。一个是在页面上，另一个在手风琴中。（我使用手风琴作为另一个列表的容器）

我的目标是让用户可以打开手风琴并从该列表中拉出项目并进入页面。

它有效 - 除了占位符在离开手风琴时消失。我试过帮助：'克隆'并增加zIndex。

以下是代码的简化版本：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $( "#inside" ).accordion({
                collapsible: true,
                fillSpace: true,
                active: false   
            });
        $("#ulOutsideList, #ulInsideList").sortable({
                opacity: 0.7,
                revert: 100,
                scroll: true,
                helper: 'clone',
                zIndex: 50000,
                connectWith: ".connectedSortable",                  
            });
    });
</script>


    <div id="outside"> <!-- 1. Pick a Store -->
        <ul id="ulOutsideList" class="connectedSortable">
        <li>outside 1</li>
        <li>outside 2</li>
        <li>outside 3</li>
        </ul>
    </div> <!-- end 1. Pick a Store -->

    <div style="clear:both"></div>

    <div id="inside">
        <h3>container</h3>
        <ul id="ulInsideList" class="connectedSortable">
            <li>inside 1</li>
            <li>inside 2</li>
            <li>inside 3</li>
        </ul>
    </div>

Answer 1

在您的可排序电话中，您想使用以下选项：

helper：“clone”，appendTo：“body”，//或者你希望帮助器克隆附加到的任何元素

这有两件事。首先它会复制被拖动的元素（辅助选项），然后它将该帮助器附加到指定的元素（appendTo选项）。

此处有类似的问题：jQuery-Ui: Cannot drag object outside of an accordion 在这里：jquery sortable cannot be dragged outside of accordion

Answer 2

Edvn的回答对我有用，但是在排序完成后，在每个元素上留下了一个style =“display：block”的副作用令人不快，这打破了我试图制作的布局。

另一种解决方案是覆盖.ui-accordion上的overflow：auto样式和溢出的.ui-accordion-content：inherit。这可以防止在拖动时隐藏sortable。在我的情况下，这并没有导致手风琴的任何问题，但可能是造型是有原因的，所以YMMV。 FWIW我在Chrome和Firefox上测试过。

更新：使用此方法时还需要权衡。溢出样式的改变可导致当展开片段并且上段在动画序列期间仍然关闭时，较低的折叠段的内容出现在手风琴对象下方。您可以通过仅设置oerflow来继承最小化影响：继承.ui-accordion和您需要排序的.ui-accordion-content实例。

jQuery UI：将可排序从Accordion拖到外部

2 个答案: