JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

<div ng-app="foo" ng-controller="bar">
<div ng-repeat="column in columns" id="column-{{$index}}" class="column">
	<div class="blocks-wrapper" ui-sortable="columnSortableConfig" ng-model="column.blocks">
		<div ng-repeat="block in column.blocks" class="block" id="block-{{block.id}}">
            {{block.id}}
		</div>
</div>
    
</div>
{{columns}}
</div>

CSS

.blocks-wrapper{
    margin-bottom: 20px;
    border: 1px solid blue;
    padding: 10px;
}
.block{
    border: 1px solid black; 
    height: 20px;
}
.block-placeholder{
    border: 1px solid red;
}

JavaScript

foo = angular.module('foo', ['ui.sortable']);

foo.controller('bar', function($scope){
    $scope.columns = [{blocks: [{id: 1},{id: 2}]},{blocks: [{id: 3}]}];
    
    $scope.columnSortableConfig = {
		connectWith: '.blocks-wrapper',
		placeholder: 'block-placeholder',
		forcePlaceholderSize: true,
		tolerance: 'pointer',
	};
});