3

可能重复：
可排序和可删除的淘汰赛列表

我正在使用淘汰赛来绑定 UL。我想让用户能够拖放 LI 并让我的视图模型通过重新排序进行更新。

拖放工作正常，我的 jquery 中有正确的事件，但我不确定如何进行更新。

我搜索了文档，但找不到任何东西。

我创建了一个小提琴，让解释我在做什么更容易

Js Fiddle在这里

任何建议都会很棒！

更新了 jsfiddle 链接

4

2 回答 2

2

我从未使用过 Knockout，而且我现在没有时间了解它的复杂性，所以这不是一个完整的解决方案，但这里有一些东西可以帮助你入门。请参阅下面的链接，了解我在搜索时发现的一些页面的链接，这些页面可能会帮助您完成解决方案。

这是我从你原来的小提琴中改变的部分：

var view_model = new ViewModel(initialData);

ko.applyBindings(view_model);

$(function() {
    $( "#sortable" ).sortable({
        revert: true,
        stop: function(event, ui) { console.log("stop event")},


        start : function ( event, ui ) {

            ui.item.data( 'previous_index', ui.item.index() );

        },
        // start


        update : function ( event, ui ) {

            var question = view_model.questions.splice(

              ui.item.data( 'previous_index' ), 1

            )[0];

            view_model.questions.splice( ui.item.index(), 0, question );

            ui.item.removeData( 'previous_index' );

        }
        // update

    });
});

参考：

jQuery UI Sortable，如何在更新事件中确定当前位置和新位置？

使用 jquery ui 可排序插件获取项目的开始位置

带有原始位置占位符的jQuery Sortable（）？

淘汰赛 + jqueryui 可拖动/可拖放后续

于 2012-08-11T13:50:43.537 回答
0

Ryan Niemeyer 为此目的编写了一个 Knockout 插件：

这是更新的博客条目：

于 2012-09-26T17:09:25.517 回答