Sortable Accordion

A list of options. User expands the different sections and drags their selections to the saved list.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<div class="demo">
    <div id="swaplist" style="height: 0;"></div>
    <ul id="sortable2" class='saved'>
        <div class="container" style="overflow:auto;">
            <div align='center'>
                 <h2>Saved List</h2>

            </div>
            <div class="group"></div>
        </div>
    </ul>
    <br />
    <ul id="sortable1" class='available'>
        <div align='center'>
             <h2>Available Fields</h2>

        </div>
        <br />
        <div id="accordion" style="width:950px;">
            <div class="group">
                 <h2><span class="text"><a href="#">Personal</a></span></h2>

                <div class="container">
                    <ul id="sortable1" class='available' style="width:850px;">
                        <li class='ui-state-default'><b>First Name</b>

                            <br />Section: A</li>
                        <li class='ui-state-default'><b>Last Name</b>

                            <br />Section: A</li>
                        <li class='ui-state-default'><b>Date of Birth</b>	
                            <br />Section: A</li>
                    </ul>
                </div>
            </div>
            <br />
            <div class="group">
                 <h2><span class="text"><a href="#">Education</a></span></h2>

                <div class="container">
                    <ul id="sortable1" class='available' style="width:850px;">
                        <li class='ui-state-default'><b>Associate's</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Bachelor's</b>

                            <br />Section: B</li>
                        <li class='ui-state-default'><b>Master's</b>

                            <br />Section: B</li>
                        <li...

CSS

.ui-widget-content {
    background:#CCFFCC;
}
.ui-accordion-header {
    position:fixed;
    width: 100%;
}
.container {
    width:100% !important;
    border-style:none;
}
.group {
    height:auto !important;
    border-style:none;
}
#accodion h2 {
    display:block;
    text-align:left;
}
#accordion span.text {
    text-align:left;
}
#sortable1 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    background: #CCFFCC;
    padding: 5px;
    width: 1000px;
}
#sortable1 li {
    margin: 5px;
    padding: 5px;
    font-size: 1em;
    width: 200px;
    float: left;
}
#sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    width: 1000px;
}
#sortable2 li {
    margin: 5px;
    padding: 5px;
    font-size: 1em;
    width: 120px;
    float: left;
}

JavaScript

$(function () {

    $("#accordion")
        .accordion({
        active: false,
        collapsible: true,
        animate: false,
        heightStyle: "content",
        autoHeight: false,
        header: "> div > h2"
    })
        .sortable({
        axis: "y",
        handle: "h2",
        stop: function (event, ui) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h2").triggerHandler("focusout");
        }
    });


    $("ul.available").sortable({
        connectWith: "ul",
        scroll: true,
        helper: 'clone', //keeps children visible when pulling out of container
        appendTo: '#swaplist' //temporarily stores children in hidden div
    });

    $("ul.saved").sortable({
        connectWith: "ul",
        receive: function (event, ui) {

            if ($(this).children().length > 9) {
                //ui.sender: will cancel the change.
                //Useful in the 'receive' callback.
                $(ui.sender).sortable('cancel');
            }
        },
        items: "li[id!=nomove]",
        update: function () {
            var order = $(this).sortable("serialize") + '&action=update';
            $.post("ajax_file", order, function (theResponse) {
                $("#info").html(theResponse);
            });
        },
        helper: 'clone', //keeps children visible when pulling out of container
        appendTo: '#swaplist' //temporarily stores children in hidden div
    });

    $("#sortable1, #sortable2").disableSelection();
    $("#sortable1, #sortable2").disableSelection();
});