Angular-UI Sortable Demo

by maxgalbu

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script type="text/ng-template" id="widget.html">
    <span ng-show="item.text">{{item.text}}</span>
    <ul ng-show="item.subwidgets" ui:sortable ng:model="item.subwidgets">
        <li ng:repeat="item in item.subwidgets" class="item">{{item}}</li>
    </ul>
</script>
<script type="text/ng-template" id="widgetlog.html">
    <span ng-show="item.text">{{item.text}}</span>
    <ul ng-show="item.subwidgets" ui:sortable ng:model="item.subwidgets">
        <li ng:repeat="item in item.subwidgets">{{item}}</li>
    </ul>
</script>

<div ng:controller="controller">
    <ul ui:sortable ng:model="list">
        <li ng:repeat="item in list" class="item" ng-include="'widget.html'"></li>
    </ul>
    <hr />
    <div ng:repeat="item in list" ng-include="'widgetlog.html'"></div>
</div>

CSS

.item, .placeholder {
    padding: 2px;
    width: 50px;
    border: 1px solid #333;
    background: #EEE;
}

.placeholder {
    background: #AEF;
}

JavaScript

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

myapp.controller('controller', function ($scope) {
    $scope.list = [{text:"one"}, {text:"sub", subwidgets:["two", "three"]}, {text:"four"}, {text:"five"}];
});

angular.bootstrap(document, ['myapp']);