Reverting a drag to a sortable

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">
<ul id="draggable">
    <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-highlight">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable" class="ui-state-highlight">
</ul>

CSS

li {
    margin: 5px;
    padding: 5px;
    width: 150px;
}

#sortable {
    margin-top: 16px;
    min-height: 256px;
}

JavaScript

$(document).ready(function() {
    $("#sortable").sortable({
        start: function(event, ui) {
        		console.log(event)
            if (ui.item.hasClass("ui-state-highlight")) {
                ui.sender.draggable("cancel");
            }
        },
        stop: function(event, ui) {
            if (ui.item.hasClass("ui-state-highlight")) {
                ui.item.remove();
            }
        }
    });

    $("#draggable li").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
});