JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<ol data-bind="foreach: people" class='example'>
    <li>Knockout position <span data-bind="text: $index"> </span>
        <br />Item name: <span data-bind="text: name"> </span>
        <br />Order that I want to save in database: <span data-bind="text: order"> </span>

        <ol></ol>
    </li>
</ol>

CSS

body.dragging, body.dragging * {
    cursor: move !important;
}
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
ol.example li.placeholder {
    position: relative;
    /** More li styles **/
}
ol.example li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
}

JavaScript

function AppViewModel() {
    var self = this;

    self.people = ko.observableArray([{
        name: 'Item A',
        order: ko.observable(1)
    }, {
        name: 'Item B',
        order: ko.observable(2)
    }, {
        name: 'Item C',
        order: ko.observable(3)
    }]);
}

ko.applyBindings(new AppViewModel());

$(function () {
    $("ol.example").sortable({
        onDrop: function ($item, container, _super) {
            $item.removeClass("dragged").removeAttr("style");
            $("body").removeClass("dragging");
            
            var children = $item.parent().children();
             
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var koData = ko.dataFor(child);
                var index = ko.utils.arrayIndexOf($item.parent().children(), child);
                koData.order(index ) 
            } 
        } 
    });
})