angular-ui-tree toolbar example

dding new element by dragging from toolbar uses two ui-trees

by johnoscott

HTML

<script src="http://code.angularjs.org/1.2.15/angular.min.js"></script>
<script src="https://rawgit.com/JimLiu/angular-ui-tree/master/dist/angular-ui-tree.min.js"></script>
<div ng-app="Baum" ng-controller="Test">
    <div ui-tree="toolbarOptions">
      <ol ui-tree-nodes ng-model="toolbar">
        <li ng-repeat="item in toolbar" ui-tree-node>
            {{item.title}}
        </li>
      </ol>
    </div>
    
    <hr/>
    
    <div ui-tree="treeOptions">
      <ol ui-tree="treeOptions" ui-tree-nodes ng-model="data2">
        <li ng-repeat="item in data2" ui-tree-node>
            {{item.title}}
        </li>
      </ol>
    </div>
</div>

CSS

.angular-ui-tree {

}

.angular-ui-tree-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.angular-ui-tree-nodes {
	display: block;
	position: relative;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.angular-ui-tree-nodes .angular-ui-tree-nodes {
    padding-left: 20px;
}
.angular-ui-tree-node, .angular-ui-tree-placeholder {
	display: block;
	position: relative;
	margin: 0px;
	padding: 0px;
	min-height: 20px;
	line-height: 20px;
}

.angular-ui-tree-hidden {
    display: none;
}

.angular-ui-tree-placeholder {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
}

.angular-ui-tree-handle {
    cursor: move;
    text-decoration: none;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 20px;
    line-height: 20px;
}


.angular-ui-tree-drag {
    position: absolute;
    pointer-events: none;
    z-index: 999;
    opacity: .8;    
}

JavaScript

var app = angular.module('Baum', ['ui.tree']);

app.controller('Test', function($scope) {
    $scope.toolbar = [
        {title: 'Item 1'},
        {title: 'Item 2'},
        {title: 'Item 3'}
    ];
    var originalToolbarItems = angular.copy($scope.toolbar);
    
    $scope.data2 = [
        {title: 'A'},
        {title: 'B'},
        {title: 'C'}
    ];
    
    $scope.toolbarOptions = {
        accept: function(sourceNodeScope, destNodesScope, destIndex) {
			return false;
		},
        dragStart: function(event) {
            event.elements.placeholder.replaceWith(event.elements.dragging.clone().find('li'));
        },
        dragStop: function(event) {
			$scope.toolbar = angular.copy(originalToolbarItems);
		}
    };
    
    $scope.treeOptions = {
	};
    
});