JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-controller="Test" sortable>
    <div ng-repeat="item in data().paragraphs" class="box slide_content" id="{{$index}}" orderBy:item.position> 
        {{item.content}}, ID: {{item.position}}
    </div>
    
    <input type="button" ng-click="add()" value="Add">
</div>

CSS

.box {
    width: 200px;
    height: 20px;
    border: solid black 1px;
    margin-top: 5px;
}

JavaScript

var App = angular.module("MyApp", []);

App.controller("Test", function($scope, StorageService) {
    StorageService.set({
        paragraphs: [
            {content: "content one", position: 0},
            {content: "cnt two", position: 1},
            {content: "random three", position: 2},
            {content: "last one yeeaah", position: 3}
        ]
    });
    
    $scope.data = StorageService.get;
    
    $scope.add = StorageService.add;
});

App.directive("sortable", function(StorageService) {
	return {
		link: function(scope, element, attrs) {
			$(element[0]).sortable({
				cancel: ".disabled",
				items: "> .slide_content:not(.disabled)",
				start: function(e, t) {
					t.item.data("start_pos", t.item.index());
				},
				stop: function(e, t) {
					var r = t.item.data("start_pos");
                    var that = this;
					if (r != t.item.index()) {
                        scope.$apply(function() {		             StorageService.sort($(that).sortable("toArray"));
                          }
                        );
					}
				}
			});
		}
	};
});

App.factory('StorageService', function() {
	var output = {};

	return {
		set: function(data) {
			angular.copy(data, output);
			return output;
		},
		get: function() {
			return output;
		},
		remove: function(id) {
			output.paragraphs.splice(id, 1);
		},
		add: function() {
			output.paragraphs.push({
				content: 'Content'
			});
		},
		sort: function(order) {
            var i=0;
			for (var j in order) {
				var id = parseInt(order[j]);
				output.paragraphs[id].position = i++;
			}
            
			return output;
		}
	};
});