Timing issue with connected sortable?

Timing issue with connected sortable?

Hi all,

I am trying to build a connected sortable that will maintain a column height of 10 items, and preserve the sort order across two columns. Everything looks like it's working when I slowly drag items from one column to another, however, if I hover over multiple columns before dropping an item, or drop really quickly, the list becomes unbalanced. I can't reproduce it when I set breakpoints in Firebug; not sure if this is an issue with my logic ( I know I am exploiting closures..which can be troublesome) or if it is an underlying jQuery issue.

This is my script:
  1. <script type="text/javascript">
        $(document).ready(
        function() {
            var oldFirst;
            var oldSecond;   
            var movedChild;
            $( "#sortable1, #sortable2" ).sortable({
                connectWith: ".connectedSortable",
                start : function(e, ui)
                {
                    oldSecond = $("#sortable2").children().get(0);
                    oldFirst = $("#sortable1").children().get(0);
                    movedChild = ui.item;
                },
                over: function() {
                    var myId = "#"+$(this).attr('id');
                    var hisId = (myId == "#sortable1" ) ? "#sortable2" : "#sortable1";
                    var mySize = $(myId).children().length;
                    var hisSize = $(hisId).children().length;
                    var firstHead = $("#sortable1").children().get(0);
                    var secondHead = $("#sortable2").children().get(0);
                    var firstChild;
                    var lastChild;
                   
                   
                    if (myId == "#sortable1") {
                        lastChild = $(myId).children().get(10);
                        $(hisId).prepend(lastChild);
                    } else {
                        if (oldSecond != secondHead) {
                            firstChild = $(myId).children().get(1);
                            $(hisId).append(firstChild);
                        } else {
                            firstChild = $(myId).children().get(0);
                            $(hisId).append(firstChild);
                        }
                    }
                   
                }
            }).disableSelection();
           
        }
        );
    </script>











































My connectedSortable is attached to two very simple ul's

  1.     <ul id="sortable1" class="connectedSortable">
            <li id='1'>item 1</li>
            <li id='2'>item 2</li>
            ..
            <li id='10'>item 10</li>
        </ul>
        <ul id="sortable2" class="connectedSortable">
            <li id='11'>item 11</li>
            <li id='12'>item 12</li>
            ...
            <li id='20'>item 20</li>
        </ul>












I would appreciate any help, been beating my head against the wall over this for a couple of days!

Thanks in advance!