Adding jquery dragdrop to knockout

Question

Possible Duplicate:
Sortable and droppable knockout list

I am using knockout to bind a UL. I am wanting to gives users the ability to drag and drop a LI and for my viewmodel to update with the reorder.

Drag and drop is working and I have the correct event working within my jquery but I am not sure how to make the update.

I have had a hunt around the documentation but cant find anything.

I've created a fiddle to make explaining what I am doing a little easier

Js Fiddle here

Any suggestions would be awesome!

Updated the jsfiddle link

Just FYI ... you can rewrite the toJSON like this (new on Knockout 2.1) self.lastSavedJson(ko.toJSON(self.questions, null, 2)); — John Papa, Aug 11 '12 at 14:47
This plugin might help you too: https://github.com/rniemeyer/knockout-sortable — RP Niemeyer, Aug 13 '12 at 02:51

score 2 · Accepted Answer · edited May 23 '17 at 12:27

I've never worked with Knockout and I don't have time to understand its intricacies right now, so this isn't a complete solution, but here's something to get you started. See below for links to some pages I found while searching that may help you complete the solution.

This is the part that I changed from your 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

    });
});

References:

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