将jQuery拖放功能添加到Knockout

Question

可能重复：
Sortable and droppable knockout list

我正在使用knockout绑定一个UL。 我希望用户能够拖放LI，并让我的视图模型更新排序。

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

我已经查看了文档，但找不到任何信息。

我创建了一个fiddle以使我所做的解释更容易理解。

这里是Js Fiddle

任何建议都将非常棒！

更新了jsfiddle链接

- Diver Dan

---

那个小提琴里面应该有一些可拖动的东西吗？ - JMM

嘿，@JMM，是的，你说得对。我已经修复了链接。 - Diver Dan

只是提供信息...你可以像这样重写toJSON（在Knockout 2.1中新的）self.lastSavedJson(ko.toJSON(self.questions, null, 2)); - John Papa

这个插件可能也会对你有所帮助：https://github.com/rniemeyer/knockout-sortable - RP Niemeyer

Answer 1

我从未使用过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 sortable插件获取项目的起始位置

jQuery Sortable()以原始位置占位符

knockout + jqueryui拖放后续

- JMM

Answer 2

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

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

这是一篇更新的博客文章：

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

- Jim G.