jquery-ui - jquery dragdrop をノックアウトに追加する

Question

重複の可能性:
ソートおよびドロップ可能なノックアウトリスト

ノックアウトを使用して UL をバインドしています。ユーザーが LI をドラッグアンドドロップし、ビューモデルを並べ替えて更新できるようにしたいと考えています。

ドラッグアンドドロップは機能しており、jquery 内で正しいイベントが機能していますが、更新方法がわかりません。

ドキュメントを探しましたが、何も見つかりません。

私がやっていることを少し簡単に説明するためにフィドルを作成しました

JSフィドルはこちら

どんな提案でも素晴らしいでしょう！

jsfiddle リンクを更新しました

score 2 · Accepted Answer

私は 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()?

ノックアウト + jqueryui ドラッグ/ドロップ可能フォローアップ