Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<ul id="type_cat_list">
    <li class="asset_type" id="t1">
        <a href="#" class="on">Pro Video Equipment</a>
        <ul class="cat_list">
            <li class="asset_cat" id="c1"><a href="#">LCD Projectors</a></li>
            <li class="asset_cat" id="c2"><a href="#">Screens</a></li>
            <li class="asset_cat" id="c3"><a href="#">Plasma &amp; LCD Displays</a></li>
            <li class="asset_cat" id="c4"><a href="#">Video Cameras</a></li>
            <li class="asset_cat" id="c5"><a href="#">Document Cameras</a></li>
            <li class="asset_cat" id="c6"><a href="#">Seamless Switchers</a></li>
            <li class="asset_cat" id="c7"><a href="#">Broadcast</a></li>
        </ul>
    </li>
</ul>
<br />
<p><a href="errors.html"><b>View error examples<b></a></p>

CSS

*{margin:0;padding:0}
ul{list-style-type:none}
#type_cat_list, p{margin:20px;width:270px}
a{color:#000}
li.asset_type a{color:#369;text-decoration:none;font-weight:bold}
li.asset_type a:hover{background:#f5f5f5;color:#369;text-decoration:none}
li.asset_type{border-bottom:#edf3fe 1px solid}
li.asset_type a{display:block;padding:6px 5px 6px 5px;font-size:1.2em;}
li.asset_type a.on,
li.asset_type a.on:hover{background:#edf3fe;font-weight:bold;color:#000;text-decoration:none}
li.asset_cat a{color:#369;text-decoration:none;font-weight:normal}
li.asset_cat a:hover{background:#f5f5f5;color:#369;text-decoration:none}
li.asset_cat a.on{background:#fff;color:#000;text-decoration:none;font-weight:bold}
li.asset_cat a.on:hover{background:#f5f5f5;color:#000;text-decoration:none}
li.asset_type ul{text-indent:6px;font-size:.9em}
.move_cursor a{cursor:move}
.placeholder{background:#FDFFC7;width:270px}

JavaScript

var stop;
    
    $(".cat_list").sortable({
        axis: 'y',
        revert: true,
        delay: 1000,
        opacity: 0.6,
        placeholder: 'placeholder',
        start: function(event, ui) {
            ui.item.addClass('move_cursor');
            ui.placeholder.css('height', ui.item.height());
            stop = true;
        },
        stop: function(event, ui){
            ui.item.removeClass('move_cursor');
        }
    });
    
    $("#type_cat_list").disableSelection();

   $("li.asset_cat a").click(function(event){
        if (stop) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
        else{
            $('li.asset_cat a').removeClass('on');
            $(this).addClass('on');
        }
    });