jQuery UI：将可排序从手风琴内部拖到外部答案

【问题标题】：jQuery UI: Drag Sortable from within Accordion to OutsidejQuery UI：将可排序从手风琴内部拖到外部
【发布时间】：2010-12-01 00:55:53
【问题描述】：

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

我的目标是用户可以打开手风琴并将项目从列表中拉出并放到页面上。

它有效 - 除了占位符在离开手风琴时消失。我试过 helper: 'clone' 并增加 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>

【问题讨论】：

所以您想将元素拖出手风琴并在其位置留下空占位符？

标签： jquery list jquery-ui accordion jquery-ui-sortable

【解决方案1】：

在您的可排序调用中，您希望使用以下选项：

helper: "clone", appendTo: "body", // 或任何你希望帮助克隆附加到的元素

这有两个作用。首先，它会复制被拖动的元素（helper 选项），然后将 helper 附加到指定的元素（appendTo 选项）。

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

【讨论】：

谢谢，这正是我所需要的。

【解决方案2】：

Edvn 的回答对我有用，但在排序完成后会在每个元素上留下 style="display:block" 的副作用，这破坏了我试图制作的布局。

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

更新：使用此方法时也需要权衡取舍。溢出样式的更改可能导致下部折叠式段的内容在折叠式对象展开时出现在折叠式对象下方，而上部折叠式段在动画序列期间仍处于关闭状态。您可以通过仅在 .ui-accordion 和需要排序的 .ui-accordion-content 实例上设置 oerflow:inherit 来最小化影响。

【讨论】：