Knockout Drag-drop

Knockout Drag-drop functionality with property update.

by infiniteloops

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<span data-bind="text: Category.Title"></span><br/>
<span data-bind="text: Category.Synopsis"></span><br/>
<ol data-bind="sortable: {data: Category.Documents, afterMove: myDropCallback}" id="documentOrder">
    <li data-bind="attr:{id: DocumentID}"><span data-bind="text:Name"/></li>
</ol>
<span id="savemessage">some text</span><br/>
<input type='button' id='btnTest' value='Show Json' />
<br/>
<div id='jsonDiv'></div>

JavaScript

var data = '{"ResourceID":2,"Title":"Resource one","ToolTip":"this is a tooltip that expalins a bit nore","Synopsis":"long synopsis that has tons of info","Documents":[{"ResourceDocumentID":2,"date":"03/03/2012","DocumentName":"Long Document Title","DisplayOrder":0,"DocumentType":{"DocumentType":"PDF","date":"03/04/2012"}},{"ResourceDocumentID":3,"date":"03/06/2012","DocumentName":"Short Document","DisplayOrder":1,"DocumentType":{"DocumentType":"DOC","date":"03/06/2012"}},{"ResourceDocumentID":5,"date":"03/02/2012","DocumentName":"third doc","DisplayOrder":2,"DocumentType":{"DocumentType":"PDF","date":"03/02/2011"}},{"ResourceDocumentID":6,"date":"03/02/2012","DocumentName":"another doc","DisplayOrder":3,"DocumentType":{"DocumentType":"PDF","date":"03/02/2011"}}]}';

var viewModel = {
    Category: {
        Title: ko.observable(),
        Synopsis: ko.observable(),
        Documents: ko.observableArray([]).extend({
            indexed: 'displayOrder'
        }),
        myDropCallback: function(arg) {
            var foo = "Moved '" + arg.item.name() + "' from " + arg.id + " (index: " + arg.sourceIndex + ") to " + arg.targetParent.name() + " (index " + arg.targetIndex + ")";
            alert(foo);
            //arg.item.displayOrder
            arg.item.DisplayOrder(arg.targetIndex);
        }
    },


    myDropCallback: function(arg) {
        var foo = "Moved '" + arg.item.Name() + "' from " + arg.id + " (index: " + arg.sourceIndex + ") to " + arg.targetParent.id + " (index " + arg.targetIndex + ")";
        alert(foo);
        //arg.item.displayOrder
        var lowerBound = 0;
        var upperBound = 0;
        if(arg.sourceIndex < arg.targetIndex){
            lowerBound = arg.sourceIndex;
            upperBound = arg.targetIndex;
        }
        else{
            lowerBound = arg.targetIndex;
            upperBound = arg.sourceIndex;
        }
        
        for(var ix = lowerBound; ix <= upperBound; ix++){
           ...