Knockout Sortable insert at wrong location

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://raw.github.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<div class="steps">
    <!-- ko foreach: columns -->
    <div class="column">
        <header class="nothing">
             <h1 class="edit-step">
                    <em class="step-name" data-bind="text: title"></em>
                    <div class="tasks_count" data-bind="html: queue().count"></div>
                </h1>

        </header>
        <section class="edit-queue status">
             <h1 class="name not-empty">
                    <span>Queue</span>
                </h1>

            <div class="kan" data-bind="sortable: queue">
                <div data-bind="attr: {class: color}">
                    <div class="task-details">
                        <p class="title" data-bind="text: title"></p>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- /ko -->
</div>

CSS

.steps {
    width: 1060px;
    display: block;
}
.column {
    float: left;
    display: block;
    min-height: 200px;
    background-color: #efefef;
    border: 1px solid #d8d8d8;
    margin-bottom: 70px;
    border-radius: 5px;
    vertical-align: baseline;
    margin-right: 15px;
}
.column header {
    border-radius: 8px;
    box-shadow: rbga(255, 255, 255, 0.8) 0px 0px 2px 0px inset;
    background-color: #e1e1e1;
    border: 1px solid #bfbfbf;
    color: #515151;
    font-weight: bold;
    font-family:'Helvetica Neue', Helvetica, sans-serif;
    padding: 2px 6px;
    margin 5%;
}
.column .edit-queue {
    margin-bottom: 10px;
    text-align: left;
}
.column .status h1 {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-left: none;
    border-right: none;
    color: #515151;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 6px;
    font-family:'Helvetica Neue', Helvetica, sans-serif;
    padding: 5px 10px;
    text-shadow: 0 1px 0 white;
    text-transform: uppercase;
}
.column .kan {
    min-height: 300px;
}
.edit-step {
    text-shadow: 1px 1px 1px #fff;
    position: relative;
    text-align: center;
}

JavaScript

var Task = function (id, title, color) {
    this.id = id;
    this.title = title;
    this.color = color;
};

var Table = function (title, tasks) {
    this.queue = ko.observableArray(tasks);
    this.title = title;
};

var vm = function () {
    this.columns = ko.observableArray([
        new Table("To Do", [
            new Task(1, "Item 1", "yellow"),
            new Task(2, "Item 2", "red")
        ]),
        new Table("Research", [
            new Task(3, "Item 3", "red"),
            new Task(4, "Item 4", "yellow")
        ])
    ]);
};

ko.applyBindings(new vm());