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

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.

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

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

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

2 个解决方案

#1

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

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

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

helper:“clone”,appendTo:“body”,//或者你想要帮助克隆附加到的任何元素

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

这样做有两件事。首先它创建被拖动元素的副本(辅助选项),然后它将该帮助器附加到指定元素(appendTo选项)。

类似的问题在这里:jQuery-Ui:不能将对象拖到手风琴之外,这里:jquery sortable不能被拉到手风琴之外

#2

Edvn's answer worked for me, but had the unpleasent side effect of leaving a style="display:block" on each element after sorting completed, which broke the layout I was trying to make.

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

An alternative solution is to override the overflow:auto style on .ui-accordion and .ui-accordion-content to overflow:inherit. This prevents the sortable from being hidden while dragging. In my case this did not result in any problems with the accordion, but presumably that styling is there for a reason, so YMMV. FWIW I tested on Chrome and Firefox.

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

Update: There is a trade-off when using this method also. The change in overflow styling can result in the contents of a lower accordion segment appearing below the accordion object when the segment is expanded and the upper segment is still closing during the animation sequence. You can minimize the impact by only setting oerflow:inherit on .ui-accordion and the .ui-accordion-content instances that you need to sort in and out of.

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

#1