JQuery accordion + sortable. Disable parent groups from being draggable

Question

I have a list of search options grouped by their section and collapsed using accordion. The user expands a section and drags their selections to the "Saved List". These fields are saved and used for custom columns on tables in my site. Everything is working quite nicely except for a couple minor things.

1. I want to lock down the parents (Personal, Education, Subject) and only have the li elements inside be draggable. Right now the user can drag the whole group to the top which isn't desirable because I have a limit of fields they can search. Dragging a whole section can exceed that limit and break my tables.

2. In IE, after collapsing a parent, the li elements "blip" visible for a second before becoming hidden. Not a huge deal but can be annoying, especially to some of my finicky users :)

Code is below. For styling see the Fiddle of my setup.

I've gotten to the point where I can't see the forests for the trees so if I could just be pointed in the right direction, that would be much appreciated!

HTML:

<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 class='ui-state-default'><b>Doctorate</b>

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

                            <br />Section: B</li>
                    </ul>
                </div>
            </div>
            <br />
            <div class="group">
                 <h2><span class="text"><a href="#">Subject</a></span></h2>

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

                            <br />Section: C</li>
                        <li class='ui-state-default'><b>Business</b>

                            <br />Section: C</li>
                        <li class='ui-state-default'><b>Liberal Arts</b>

                            <br />Section: C</li>
                    </ul>
                </div>
            </div>
            <br />
        </div>
        <!-- End accordion -->
    </ul>
    <br clear="both" />
</div>

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();
});

UPDATE:

I found out a third thing I needed to fix. I need to make sure the user doesn't select duplicate options. See the answer below for this.

Answer 1

I figured out a way to lock down the parents! It may not be the most ideal way but it works. See the full Fiddle here.

For #1, I applied the answer at How to implement a button on a jQuery Sortable accordion header to lock the parents in place. I made a class called "DontMove" and placed them on <h2> and then set that as my cancel option in every sortable, cancel: ".DontMove". Below is a snippet for implementing it.

    $("#accordion")
        .accordion({
        active: false,
        collapsible: true,
        animate: false,
        heightStyle: "content",
        autoHeight: false,
        header: "> div > h2"
    })
        .sortable({
        axis: "y",
        handle: "h2",
        cancel: ".DontMove",
        stop: function (event, ui) {
            ui.item.children("h2").triggerHandler("focusout");
        }
    });

For #3 there was a solution thanks to prevent duplicated item in jQueryUI sortable.

This snippet is what did the trick. I placed it in the receive section.

    var id = ui.item.attr('id');
    var ele = $('#sortable2').find('li[id="'+id+'"]');
    if (ele.length != 1) {
        $(ui.sender).sortable('cancel');
    }

The problem was initially that I couldn't get a list of current elements in the Saved List before the sortable receive function would fire and add the new element. So whenever I would check to see if the added element already existed, it would always cancel since it was already added, thus meeting the condition.

Instead of fighting it, I just got all line elements with the same id. If there were more than 1 then length > 1 so cancel the drop. I know it's not good practice to have duplicate id's but since the lists are database driven there is a chance of that happening and I want to cover all bases.

As far as issue #2, I don't see it happening in Firefox or Chrome so I'm going to leave it alone since I was most worried about #1 and #3.