Trees can now be freely re-arranged :D

app/imports/ui/components/tree/TreeNode.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-	<div :class="!hasChildren ? 'empty' : null">
+	<div :class="!hasChildren ? 'empty' : null" :data-id="node._id">
 		<div class="layout row align-center">
 			<v-btn
 				small icon
@@ -9,9 +9,10 @@
 			>
 				<v-icon v-if="hasChildren || organize">chevron_right</v-icon>
 			</v-btn>
-			<v-icon class="handle mr-2" v-if="organize">reorder</v-icon>
+			<v-icon class="handle mr-2" v-if="organize" :disabled="expanded">reorder</v-icon>
 			<div>
-				<span class="mr-2 subheading">{{node && node.order}}</span>
+				<span class="mr-2 caption">{{node && node.order}}</span>
+				<span class="mr-2 caption">({{node && node.type}})</span>
 				{{node && node.name}}
 			</div>
 		</div>
@@ -21,7 +22,7 @@
 					:node="node"
 					:children="computedChildren"
 					:group="group"
-					:show-empty="organize"
+					:organize="organize"
 					@reordered="e => $emit('reordered', e)"
 					@reorganized="e => $emit('reorganized', e)"
 				/>
@@ -95,4 +96,7 @@
 	  opacity: 0.5;
 	  background: #c8ebfb;
 	}
+	.v-icon--disabled {
+		opacity: 0;
+	}
 </style>

app/imports/ui/components/tree/TreeNodeList.vue

@@ -3,6 +3,7 @@
 		:value="children"
 		class="drag-area layout column"
 		@change="change"
+		@start="start"
 		:group="group"
 		:animation="200"
 		ghost-class="ghost"
@@ -67,6 +68,9 @@
 					}
 				}
 			},
+			start(){
+				console.log({start: arguments})
+			}
 		},
 	};
 </script>