jqueryui sortable - need help reverting!

by whittet

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<table>
    <tbody class="">
        <tr class="" id="10" style="position: relative;"><td class=""><span class="" style="padding-left: 19px;"></span><input type="hidden" value="10" name="Id" class=""><input type="hidden" value="" name="ParentId" class=""><input type="text" size="8" value="10" name="Substance" class=""></td></tr><tr class="" id="20" style="position: relative;"><td class="" style="padding-left: 20px;"><input type="hidden" value="20" name="Id" class=""><input type="hidden" value="10" name="ParentId" class=""><input type="text" size="8" value="20" name="Substance" class=""></td></tr><tr class="" id="30" style="position: relative;"><td class="" style="padding-left: 20px;"><input type="hidden" value="30" name="Id" class=""><input type="hidden" value="10" name="ParentId" class=""><input type="text" size="8" value="30" name="Substance" class=""></td></tr><tr class="" id="40" style="position: relative;"><td class="" style="padding-left: 20px;"><span class="" style="padding-left: 19px;"></span><input type="hidden" value="40" name="Id" class=""><input type="hidden" value="10" name="ParentId" class=""><input type="text" size="8" value="40" name="Substance" class=""></td></tr><tr class="" id="4000" style="position: relative;"><td class="" style="padding-left: 39px;"><input type="hidden" value="4000" name="Id" class=""><input type="hidden" value="40" name="ParentId" class=""><input type="text" size="8" value="4000" name="Substance" class=""></td></tr><tr class="" id="50" style="position: relative;"><td class="" style="padding-left: 39px;"><span class="" style="padding-left: 19px;"></span><input type="hidden" value="50" name="Id" class=""><input type="hidden" value="40" name="ParentId" class=""><input type="text" size="8" value="50" name="Substance" class=""></td></tr><tr class=""...

CSS

table th { border:1px solid black; }
table td { border:1px solid black; background: #CCC; }

JavaScript

$( "tbody" ).sortable({
    axis: "y",
    opacity: .70,
    /*items: '> tr:not(:first):not(:last)',*/
    distance: 12,
    beforeStop: function (event, ui) {
        $(this).sortable('cancel');
        alert('out should not fire when dropping, but it does!');
    },
    out: function (event, ui) {
        $(this).sortable('cancel');
        alert('out should not fire when dropping, but it does!');
    }
});