KnockoutJS: how do observables track UI changes?

Question

If I have multiple <ul>'s each with its own draggable child <li>'s, and I drag-n-drop the items between the lists (aka a connected list), how does KO keep track of these changes? Evidently the ViewModel doesn't keep track of the changes, so I guess the question is how can they be tracked?

HTML:

<section>
    <ul class="connected" data-bind="foreach: fieldsCol1" id="list1">
        <li data-bind="attr: {id: id}">New Field</li>
    </ul>
    <ul class="connected" data-bind="foreach: fieldsCol2" id="list2">
        <li data-bind="attr: {id: id}">New Field</li>
    </ul>
</section>

View Model:

function VM() {
    this.fieldsCol1 = ko.observableArray([some array]);
    this.fieldsCol2 = ko.observableArray([some array]);
}

ko.applyBindings(new VM());

In above example moving items between list1 and list2 doesn't reflect on fieldsCol1 or fieldsCol2.

Btw I am using a jQuery library that allows above DND behaviour.

Answer 1

This isn't an easy problem to solve: These sorts of libraries usually involve detaching elements from the DOM, and inserting them somewhere else. Possibly they clone elements in the process. These sort of libraries aren't aware of the bindings Knockout creates, and tend to mess them up. To patch this isn't an easy task. For inspiration, take a look at the Knockout sortable plugin: http://github.com/rniemeyer/knockout-sortable