jQuery 用户界面 : Drag Sortable from within Accordion to Outside

Question

我有两个相连的可排序列表。一个只是在页面上，另一个在 Accordion 内。 (我使用 Accordion 作为其他列表的容器)

我的目标是用户可以打开 Accordion 并将项目从该列表中拉到页面上。

它有效 - 除了占位符在离开 Accordion 时消失。我尝试过 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>

Answer 1

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

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

这有两件事。首先，它创建被拖动元素的副本(帮助程序选项)，其次，它将该帮助程序附加到指定元素(appendTo 选项)。

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