knockout save reordering with jQuery SortableJS when drag/drop rearrange list in

Question

I have a knockout application, where I have a list of divs for a knockoutobservablearray. After I move an item to a new position. How do I update the knockoutobservablearray to reflect the changed order?

var sections = document.getElementById('sectionsId');

    new Sortable(sections, {
        animation: 150,
        ghostClass: 'blue-background-class',
        //onEnd: function (event) {

        //}
        onUpdate: function (evt) {
            [].forEach.call(evt.from.getElementsByClassName('section-list'), function (el, index)   {

                el.setAttribute("ordinal", index);
            });
        }
    });

---

My knockout class has Sections: KnockoutObservableArray = ko.observableArray([]);, which is binded to the div list (sections).

Thank you for your help!

I am trying to update ordinal to trigger knockout observable to detect changes. No success.

Answer 1

You should be ordering the elements in your observableArray of sections after the onUpdate event. Then KnockoutJS will automatically rearrange the sections in the DOM.