JQuery UI Sortable issue

Setting/changing connectWith option on start event not working as expected: The item needs to first be dropped in its source container before the start function handler kicks in.

by Marventus

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.24/jquery-ui.js"></script>
<div class="list-container">
    <p>List 1</p>
    <ol id="list1" class="list">
        <li class="list1">Item 1.1</li>
        <li class="list1">Item 1.2</li>
        <li class="list1">Item 1.3</li>
    </ol>
</div>
<div class="list-container">
    <p>List 2</p>
    <ol id="list2" class="list">
        <li class="list1">Item 1.4</li>
        <li class="list1">Item 1.5</li>
        <li class="list3">Item 3.4</li>
        <li class="list3">Item 3.5</li>
    </ol>
</div>
<div class="list-container">
    <p>List 3</p>
    <ol id="list3" class="list">
        <li class="list3">Item 3.1</li>
        <li class="list3">Item 3.2</li>
        <li class="list3">Item 3.3</li>
    </ol>
</div>

CSS

body{
    font-family:Arial,Helvetica,sans-serif;
}
div{
    display:block;
    float:left;
    margin-right:50px;
}
div ol{
    background:#ddd;
}
ol li{
    list-style-type:none;
}
p{
    font-weight:bold;
}
#list1 li{
    color:blue;
}
#list3 li{
    color:red;
}

JavaScript

function startFn(it) {
    itCl = $(it).attr("class");
    if ( itCl === "list1" ) {
        $("#list2").sortable("option", "connectWith", "#list1, #list2");
    } else if ( itCl === "list3" ) {
        $("#list2").sortable("option", "connectWith", "#list2, #list3");
    }
    console.log(itCl);
}
$(function() {
    var data_id;
    $("#list1").sortable({
        appendTo: "#list1, #list2",
        connectWith: "#list1, #list2",
        start: function( event, ui ) {
            startFn(ui.item);
        }
    });
    $("#list2").sortable({
        appendTo: "#list2",
        start: function( event, ui ) {
            startFn(ui.item);
        }
    });   
    $("#list3").sortable({
        appendTo: "#list2, #list3",
        connectWith: "#list2, #list3",
        start: function( event, ui ) {
            startFn(ui.item);
        }
    });    
});