Drag and drop pretty

Works only with jQueryUI 1.8. Needs adjustment to work with v1.9

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/themes/redmond/jquery-ui.css">
<form id="form1" runat="server">
    <div>
        <div id='dragselects'>Drag from :       
            <h3>Group 2</h3>
            <ul>
                <li data-value='A'>drag A</li>
                <li data-value='B'>drag B</li>
                <li data-value='C'>drag C</li>
                <li data-value='D'>drag D</li>
                <li data-value='E'>drag E</li>
            </ul>
        </div>
        <div id='dropselects'>Drop onto :
            <h3>Group A</h3><ul></ul>
        </div>
    </div>
</form>

CSS

#dragselects {
    float: left;
    width:10em;
}
#dragselects li { cursor: move; }
#dropselects {
    margin-left:12em;
    width: 15em;
}
#dropselects li span { color: Red; }
.draggingOption {
    border: 1px dashed #808080;
}

JavaScript

$(document).ready(function () {

    //create accordions for each selection
    $('#dragselects, #dropselects').accordion({ active: false, collapsible: true, autoHeight: false, header: 'h3' });

    $('#dragselects li').draggable({
        helper: function () {
            //add tooltip to draggable mouse cursor
            return $('<div>').text($(this).text()).addClass('draggingOption');
        },
        appendTo: 'body',
        cancel: 'input, textarea, button'
    });

    $('#dropselects > *').droppable({
        accept: '#dragselects li',
        drop: function (ev, ui) {
            //append draggable item to the relevant droppable accordion panel and expand panel
            var thisValue = $(ui.draggable).data('value');
            $('<span>').text(' [' + thisValue + ']').appendTo(ui.draggable);
            ui.draggable.appendTo((this.nodeName == 'H3') ? $(this).next('ul') : this);
            $('#dropselects').accordion('option', 'active', (this.nodeName == 'H3') ? this : $(this).prev('h3') );
        }
    });

});