LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Drag-Drop




In this sample you can drag-drop items within the same TreeView or from left TreeView to the right TreeView and vice versa. When item is dragged a drop marker is displayed showing the exact location at which dragged item can drop. If the marker is not shown, the drop position is not allowed.

While dragging an item over middle space of some target item, when dropped the item will be added as a child of the target item.

Multiple selection of items is enabled, which allows multiple items to be dragged and dropped.

By clicking on check boxes, you can change the built-in properties:

  • allowDrag - determines whether items can be dragged
  • allowDrop - determines whether items can be dropped


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<div>

<iui-treeview name="{{treeName}}" items="treeData" allow-drag="allowDrag" allow-drop="allowDrop" selection-mode="multi-extended"></iui-treeview>

<iui-treeview name="{{treeName2}}" items="treeData2" allow-drag="allowDrag2" allow-drop="allowDrop2" selection-mode="multi-extended"></iui-treeview>

</div>

<div>

<div>

<label><input type="checkbox" ng-click="toggleAllowDrag()" checked="checked" /> Allow Drag</label>

<label><input type="checkbox" ng-click="toggleAllowDrop()" checked="checked" /> Allow Drop</label>

</div>

<div>

<label><input type="checkbox" ng-click="toggleAllowDrag2()" checked="checked" /> Allow Drag</label>

<label><input type="checkbox" ng-click="toggleAllowDrop2()" checked="checked" /> Allow Drop</label>

</div>

</div>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){

$scope.treeName = "treeSample";

$scope.treeName2 = "treeSample2";

 

$scope.allowDrag = true;

$scope.allowDrop = true;

$scope.allowDrag2 = true;

$scope.allowDrop2 = true;

 

$scope.treeData = [

{

id: 1,

text: "Books",

icon: "icons books",

items: [

{

id: 11,

pid: 1,

text: "Business",

expanded: false,

icon: "icons business",

items: [

{ id: 111, pid: 11, text: "Economics" },

{ id: 112, pid: 11, text: "Investing", icon: "icons chart" },

{ id: 113, pid: 11, text: "Management" }

]

},

{ id: 12, pid: 1, text: "Health", icon: "icons health" },

{ id: 13, pid: 1, text: "Literature" },

{

id: 14,

pid: 1,

text: "Science",

expanded: false,

icon: "icons science",

items: [

{ id: 141, pid: 14, text: "Astronomy" },

{ id: 142, pid: 14, text: "Mathematics" },

{ id: 143, pid: 14, text: "Evolution" },

{ id: 144, pid: 14, text: "Nature" }

]

}

]

},

{

id: 2,

text: "Electronics",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Camera" },

{ id: 22, pid: 2, text: "Cell Phones" },

{ id: 23, pid: 2, text: "Video Game Consoles" }

]

},

{

id: 3,

text: "Music",

icon: "icons music",

items: [

{ id: 31, pid: 3, text: "Blues" },

{ id: 32, pid: 3, text: "Classic Rock" },

{ id: 33, pid: 3, text: "Pop" },

{ id: 34, pid: 3, text: "Jazz" }

]

},

{

id: 4,

text: "Sports",

expanded: false,

items: [

{ id: 41, pid: 4, text: "Baseball" },

{ id: 42, pid: 4, text: "Martial Arts" },

{ id: 43, pid: 4, text: "Running" },

{

id: 44,

pid: 4,

text: "Tennis",

expanded: false,

items: [

{ id: 441, pid: 44, text: "Accessories" },

{ id: 442, pid: 44, text: "Balls" },

{ id: 443, pid: 44, text: "Racquets" }

]

}

]

},

];

 

$scope.treeData2 = [];

 

$scope.toggleAllowDrag = function(){

$scope.allowDrag = !$scope.allowDrag;

}

 

$scope.toggleAllowDrop = function(){

$scope.allowDrop = !$scope.allowDrop;

}

 

$scope.toggleAllowDrag2 = function(){

$scope.allowDrag2 = !$scope.allowDrag2;

}

 

$scope.toggleAllowDrop2 = function(){

$scope.allowDrop2 = !$scope.allowDrop2;

}

}]);

.icons

{

background-image: url(resources/icons.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0;

width: 16px;

height: 16px;

}

.books

{

background-position: -16px -64px;

}

.business

{

background-position: -192px -48px;

}

.chart

{

background-position: -96px -64px;

}

.music

{

background-position: -32px -64px;

}

.science

{

background-position: 0 -64px;

}