JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-0.10.5.min.js" ng:autobind></script>
<script>
    angular.directive("ng:sortable", function(exp, el) {
    return function(el) {
        var scope = this;
        var startParent = null;
        var stopParent = null;
        $(el).sortable({
            items: 'li:not(:has(div.complete))',
            start: function(event, ui) {
                startParent = $(ui.item).parent();
            },
            stop: function(event, ui) {
                stopParent = $(ui.item).parent();
                var stopData = scope.data.lists[stopParent.attr('lid')];
                var tasks = [];
                stopParent.children('li').each(function(index) {
                    var liItem = scope.$eval($(this).attr('obj'));
                    liItem.ord = index;
                    tasks.push(liItem);
                });
                stopData.tasks  = tasks;
                scope.$eval();
                
    //Post sort data read
                $('#data-output').empty();
                $.each(stopData.tasks, function(index, value) {
                    $('#data-output').append(value['name']+'<br />');
                });
            },
            connectWith: '.sortable-linked',
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true,
            axis: 'y',
            dropOnEmpty: true
        });
    }
});
</script>

<div ng:controller="AppMain" class="list-wrapper">
    <div ng:repeat="list in data.lists">
        <div class="list-title">{{list.name}}</div>
        <ul ng:sortable="" class="list-body" lid="{{list.id}}">
            <li ng:repeat="task in list.tasks" class="list-item" obj="{{task}}">
                <div>{{task.name}}</div>
            </li>
        </ul>
    </div>
    <hr />
    <div id="data-output"></div>
</div>

CSS

.list-wrapper { font-family: courier; }
.list-title { font-weight: bold; font-size: 1.2em; margin-bottom: .5em }
.list-body { padding-left: 3em; }
.list-item { padding: 5px; margin-bottom: .3em; border: 1px #22F solid; width: 80%; background-color: #EEE; cursor: pointer; }

JavaScript

function AppMain() {
    this.data = {"lists":{
        "9fb066682eaf9cb0deef1c29def29044":{
            "id":"9fb066682eaf9cb0deef1c29def29044",
            "name":"Sortable List",
            "tasks":[{
                "id":"tsk2ad4260683b8622f09f9dd742dd60",
                "name":"New Task 1",
                "ord": 0
                },{
                "id":"tsk051dcb78eed9bd8ca872bb7d7fc21",
                "name":"New Task 2",
                "ord": 1
                },{
                "id":"tsk5ac618c9af12f9e0ae789841bd3fe",
                "name":"New Task 3",
                "ord": 2
                },{
                "id":"tsk33cdd6bd194c99c5225b55bfc5b41",
                "name":"New Task 4",
                "ord": 3
                },{
                "id":"tske4f83be6aa766f6a8be3409848c06",
                "name":"New Task 5",
                "ord": 4
                },{
                "id":"tsk7094a792ba3ee558354f3a8a1c66b",
                "name":"New Task 6",
                "ord": 5
                }
            ]
        }
    }};
};
   
AppMain.prototype = {
     
};