Knockout结合SortableJS拖拽排序后，如何更新ObservableArray同步顺序？

核心问题在于：你之前修改DOM的ordinal属性无法触发Knockout的数据同步——因为Knockout是数据驱动UI，只有更新数据源（ObservableArray本身）才能让数据和UI保持一致，单纯修改DOM属性不会反向更新数组。

下面是直接可行的解决方案：

步骤1：确保列表项绑定对应的数据对象 #

你的DOM列表是通过Knockout的foreach绑定到Sections数组的，所以每个.section-list元素都绑定了一个section对象。我们可以直接利用Knockout的API获取这个对象，不用额外存标识。

步骤2：在Sortable的onUpdate回调中同步数组排序 #

当拖拽完成触发onUpdate时，获取排序后的所有DOM元素，提取每个元素绑定的section对象，然后重新赋值给SectionsObservableArray：

var sections = document.getElementById('sectionsId');
// 假设你的ViewModel实例存在这个变量里（根据实际代码调整）
var sectionsViewModel = ...; 

new Sortable(sections, {
    animation: 150,
    ghostClass: 'blue-background-class',
    onUpdate: function (evt) {
        // 获取当前排序后的所有列表项DOM
        const sortedDomItems = Array.from(evt.target.querySelectorAll('.section-list'));
        // 提取每个DOM项对应的Knockout数据对象
        const sortedSections = sortedDomItems.map(domItem => ko.dataFor(domItem));
        // 更新ObservableArray，完成数据与UI排序同步
        sectionsViewModel.Sections(sortedSections);
    }
});

为什么之前的方法没用？ #

你修改的是DOM元素的ordinal属性，但这个属性如果不是绑定到section对象的Observable值，Knockout根本感知不到变化。而且就算ordinal是Observable，数组的顺序没改变，Knockout的foreach还是会按原数组顺序渲染，所以必须直接重新排序数组本身。

额外优化：同步ordinal字段（如果需要） #

如果你确实需要更新每个section对象的ordinal属性（比如后端需要存储排序序号），可以在同步数组后顺便遍历更新：

onUpdate: function (evt) {
    const sortedDomItems = Array.from(evt.target.querySelectorAll('.section-list'));
    const sortedSections = sortedDomItems.map(domItem => ko.dataFor(domItem));
    // 更新ordinal字段（假设ordinal是Observable类型）
    sortedSections.forEach((section, index) => {
        section.ordinal(index);
    });
    // 更新数组顺序
    sectionsViewModel.Sections(sortedSections);
}

内容的提问来源于stack exchange，提问作者user1561196