jQuery UI：将可排序从Accordion拖到外部 [英] jQuery UI: Drag Sortable from within Accordion to Outside

问题描述

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

I have two sortable lists that are connected. One is simply on the page, the other is within an accordion. (I'm using the accordion as a container for the other list)

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

My goal is such that a user can open the accordion and pull items out of that list and onto the page.

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

It works - except the placeholder disappears upon leaving the accordion. I've tried helper: 'clone' and increasing the zIndex.

以下是代码的简化版本：

Here is a simplified version of the code:

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

推荐答案

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

In your sortable call you want to use the following options:

helper：clone，appendTo：body，//或您想要的任何元素要附加到的辅助克隆

helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to

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

This does two things. First it makes a copy of the element being dragged (helper option), second it attaches that helper to the specified element (appendTo option).

这里类似的问题： jQuery-Ui：无法将对象拖到手风琴之外
和此处： jquery sortable不能在手风琴之外拖动

这篇关于jQuery UI：将可排序从Accordion拖到外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！