JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
<script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>
<div>
    <div ng-controller="demoCtrl">
        <div ng-sortable="">
            <div class="entry" ng-repeat="entry in entries">
                <div class="entry-header">{{entry.name}}</div> 
                <div class="items" ng-sortable="taskSortOptions">
                    <div class="item" ng-repeat="item in entry.items">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.entry{
    width:100px;
    float:left;
    border         : 1px solid #eceff4;
    display        : block;
    margin         : 10px;
}
.entry-header{
     padding       : 10px;
     font-size     : 16px;
     cursor        : pointer;
     height        : 30px;
     border-bottom : 1px solid #eceff4;
}
.item{
     height        : 30px;
}

JavaScript

var app = angular.module("appDemo",["ng-sortable"]);
app.controller("demoCtrl",["$scope",function($scope){
	var entries = [{
    	id:1,
        name:"list 1",
        items:[{
        	id:11,
            name:"111"
        },{
        	id:12,
            name:"122"
        },{
        	id:13,
            name:"133"
        }]
    },{
    	id:2,
        name:"list 2",
        items:[{
        	id:21,
            name:"2111"
        },{
        	id:22,
            name:"222"
        },{
        	id:333,
            name:"233"
        }]
    }];
    $scope.taskSortOptions = {
        group:'item',
        forceFallback: true
    };
    $scope.entryOpts = {
        handle       : ".entry-header",
        filter       : '.ignore-item',
        draggable    : '.entry',
        forceFallback: true
    };
   $scope.entries = entries;
}]);