I have this working example using ng-sortable;
HTML
<ul as-sortable="vm.sortableOptions" ng-model="vm.items">
<li ng-repeat="item in vm.items" as-sortable-item class="as-sortable-item">
<div as-sortable-item-handle class="as-sortable-item-handle" style="height: 50px">
<span data-ng-bind="item.name"></span>
</div>
</li>
</ul>
JS
vm.items = [
{ name: 'item 1' },
{ name: 'item 2' }
];
vm.sortableOptions = {
containment: '#sortable-container'
};
This gives me the result:
In my case I cannot use ng-repeat since all elements I need sortable have unique and complex HTML content and are not repeatable. For this reason I tried this:
HTML
<ul as-sortable="vm.sortableOptions" ng-model="vm.items">
<li as-sortable-item class="as-sortable-item">
<div as-sortable-item-handle class="as-sortable-item-handle">
<span>Test1</span>
</div>
</li>
<li as-sortable-item class="as-sortable-item">
<div as-sortable-item-handle class="as-sortable-item-handle">
<span>Test2</span>
</div>
</li>
</ul>
Unfortunately, this gives me the following result:
The "sortable-items" seems to be "unsortable" if ng-repeat is omitted. Is there any workaround to this? Is it even possible to simply sort x number of divs within one container without using ng-repeat?
Ok, so this is how I finally decided to solve my problem, it is not optimal but works.
JS
HTML
test1.html:
test2.html: