Question

我有一个淘汰对象（菜单），我想通过拖放对该菜单进行排序。我发现jQuery Sortable是一个很好的插件，所以你可以在你的dom中对列表进行排序。但是如何将该订单与敲除对象订单属性绑定？我不能使用knockout的$ index属性，因为数组没有调整。

我创造了一个小提琴，所以你可以看到一个例子。菜单必须像这个小提琴一样嵌套。

Fiddle

<ol data-bind="foreach: people" class='example'>
<li>
    Knockout position <span data-bind="text: $index"> </span><br />
    Item name: <span data-bind="text: name"> </span><br />
    Order that I want to save in database: <span data-bind="text: order"> </span>

    <ol></ol>
</li>

function AppViewModel() {
var self = this;

self.people = ko.observableArray([
    { name: 'Item A', order: 1 },
    { name: 'Item B', order: 2 },
    { name: 'Item C', order: 3 }
]);
}

ko.applyBindings(new AppViewModel());

$(function  () {
$("ol.example").sortable({
    onDrop: function ($item, container, _super) {
        $item.removeClass("dragged").removeAttr("style");
        $("body").removeClass("dragging");

        // Set the order property of the person right in the ui here????            
    }
});
})


body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
   position: relative;
   /** More li styles **/
}
ol.example li.placeholder:before {
   position: absolute;
   /** Define arrowhead **/
}

Answer 1

knockout-sortable库处理使可排序部分与observableArray同步。您还可以拥有嵌套的可排序列表。

如果您不希望能够将项目从一个级别拖放到另一个级别，那么您可以使用connectClass选项限制哪些其他可排序项可以参与其中。

如何在使用knockout排序后设置order属性

1 个答案: