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

Answer 1

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