To-Do List

by gkohen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<div style="position:relative">
    <div id="panelLeft" class=" .ui-corner-all">
        <div id="resizable" class="ui-widget-content">
            <h3 class="ui-widget-header">Facets Assigned</h3>
        </div>
        
        <div>
            <div id="facetsList">
                <div class="group">
                    <h3><a href="#">Location</a></h3>
                    <div class="sortableFacet">
                        <ul >
                            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Category</li>
                            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sub Category</li>
                        </ul>
                    </div>
                </div>
                <div class="group">
                    <h3><a href="#">Time</a></h3>
                    <div class="sortableFacet">
                         <ul >
                            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Year</li>
                            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Week</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End left panel-->
    
    <div id="panelRight" class=" .ui-corner-all">
        <div id="resizable" class="ui-widget-content">
            <h3 class="ui-widget-header">Facets Assigned</h3>
        </div>
        

            <div id="facetsList">
                <div class="group">
                    <h3><a href="#">Location</a></h3>
                    <div class="sortableFacet">
                        <ul >
                            <li class="ui-state-default"><span class="ui-icon...

CSS

.sortableFacet { list-style-type: none; margin: 0; padding: 0; width: 40%; }
.sortableFacet li { margin: 3px 3px 3px 3px; padding: 0.3em; padding-left: 1.0em; font-size: 1.0em; height: 18px; }
.sortableFacet li span { position: absolute; margin-left: -1.0em; }
#panelLeft{width:30%}
#panelRight{width:30%;float:right}

JavaScript

$(function() {
        $( "#facetsList" )
            .accordion({
                header: "> div > h3"
            })
            .sortable({
                axis: "y",
                handle: "h3",
                stop: function( event, ui ) {
                    // IE doesn't register the blur when sorting
                    // so trigger focusout handlers to remove .ui-state-focus
                    ui.item.children( "h3" ).triggerHandler( "focusout" );
                }
            });
        $(function() {
                $( ".sortableFacet > ul" ).sortable();
                $( ".sortableFacet > ul" ).disableSelection();
            });        
    });