jQuery sortable select

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
    <li class="ui-state-default">Item 8</li>
    <li class="ui-state-default">Item 9</li>
</ul>

CSS

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
.ui-state-default { 
    border: 1px solid #d3d3d3;
    background-color: #E4E4E4;
    margin: 0 3px 3px 3px; 
    padding: 0.4em;
    font-size: 1.4em; 
    height: 18px; 
}
.highlight{
    background-color: #B24926;	
}

JavaScript

$( "#sortable" ).sortable({
    update: function(event, ui) {		
    	console.log('hey');
        var pos = ui.helper.index() < ui.placeholder.index() 
            ? { start: ui.helper.index(), end: ui.placeholder.index() }
            : { start: ui.placeholder.index(), end: ui.helper.index() }
        
        $(this)
            .children().removeClass( 'highlight' )
            .not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
    },
    stop: function(event, ui) {
        $(this).children().removeClass( 'highlight' );
    }
});