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>

Answers


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


Need Your Help

NullPointerException when working with ArgumentMatcher

java junit mocking mockito matcher

I've written the following JUnit test, which uses ArgumentMatchers.

javascript callback funcion parameters

javascript cordova callback params

I want to call a callback function using javascript, as you can see from this example code from http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html#database_size

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.