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.

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", // or whatever element you want the helper clone to be attached to

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

Similar questions here: jQuery-Ui: Cannot drag object outside of an accordion and here: jquery sortable cannot be dragged outside of accordion

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.

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.

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.