Question

可能重复：
Sortable and droppable knockout list

我正在使用敲除来绑定UL。我想让用户能够拖放LI并让我的viewmodel通过重新排序进行更新。

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

我在文档中搜索过但无法找到任何内容。

我创造了一个小提琴来解释我正在做的事情更容易

Js Fiddle here

任何建议都很棒！

更新了jsfiddle链接

Answer 1

我从未与Knockout合作，我现在没有时间了解它的错综复杂，所以这不是一个完整的解决方案，而是here's something to get you started。请参阅下文，了解我在搜索时找到的某些页面的链接，这些页面可能有助于您完成解决方案。

这是我从original fiddle更改的部分：

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, how to determine current location and new location in update event?

get the start position of an item using the jquery ui sortable plugin

jQuery Sortable() with original position placeholder?

knockout + jqueryui draggable/droppable follow-up

Answer 2

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

https://github.com/rniemeyer/knockout-sortable

以下是更新的博客条目：

http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html

添加jquery dragdrop到淘汰赛

2 个答案: