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.

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() {
    var data_id;
    $("#list1").sortable({
        appendTo: "#list1, #list2",
        connectWith: "#list1, #list2"
    });
    $("#list2").sortable({
        appendTo: "#list2",
        connectWith: "#list2"
    });   
    $("#list3").sortable({
        appendTo: "#list2, #list3",
        connectWith: "#list2, #list3"
    });    
});
$(function() {
    $("ol li").mousedown(function() {
        var liCl = $(this).attr("class");
        if ( liCl === "list1" ) {
            $("#list2").sortable("option", "connectWith", "#list1, #list2");
        } else if ( liCl === "list3" ) {
            $("#list2").sortable("option", "connectWith", "#list2, #list3");
        }
        console.log(liCl);
    });
});