Editor: Rudimentary sortable outliner.

editor/css/dark.css

 .Outliner {
+	color: #868686;
 	background: #222;
 	padding: 0;
+	width: 100%;
+	height: 140px;
+	font-size: 12px;
 	cursor: default;
 	overflow: auto;
 	outline: none;
@@ -159,13 +163,6 @@ input.Number {
 		border-top: 1px solid #333;
 	}
 
-	#sidebar #outliner {
-		width: 100%;
-		height: 140px;
-		color: #868686;
-		font-size: 12px;
-	}
-
 	#sidebar .Panel.Material canvas {
 
 		border: solid 1px #5A5A5A;

editor/css/light.css

 .Outliner {
+	color: #444;
 	background: #fff;
 	padding: 0;
+	width: 100%;
+	height: 140px;
+	font-size: 12px;
 	cursor: default;
 	overflow: auto;
 	outline: none;
@@ -152,13 +156,6 @@ input.Number {
 		border-top: 1px solid #ccc;
 	}
 
-	#sidebar #outliner {
-		width: 100%;
-		height: 140px;
-		color: #444;
-		font-size: 12px;
-	}
-
 #toolbar {
 	position: absolute;
 	left: 0px;

editor/js/Sidebar.Object3D.js

@@ -343,7 +343,7 @@ Sidebar.Object3D = function ( editor ) {
 
 				if ( object.parent.id !== newParentId && object.id !== newParentId ) {
 
-					editor.parent( object, editor.scene.getObjectById( newParentId, true ) );
+					editor.parent( object, editor.scene.getObjectById( newParentId ) );
 
 				}
 

editor/js/Sidebar.Scene.js

@@ -19,7 +19,7 @@ Sidebar.Scene = function ( editor ) {
 
 	var ignoreObjectSelectedSignal = false;
 
-	var outliner = new UI.Outliner().setId( 'outliner' );
+	var outliner = new UI.Outliner( editor );
 	outliner.onChange( function () {
 
 		ignoreObjectSelectedSignal = true;
@@ -134,7 +134,7 @@ Sidebar.Scene = function ( editor ) {
 		var options = [];
 
 		// options.push( { value: camera.id, html: '<span class="type ' + camera.type + '"></span> ' + camera.name } );
-		options.push( { value: scene.id, html: '<span class="type ' + scene.type + '"></span> ' + scene.name } );
+		options.push( { static: true, value: scene.id, html: '<span class="type ' + scene.type + '"></span> ' + scene.name } );
 
 		( function addObjects( objects, pad ) {
 

editor/js/libs/ui.three.js

@@ -136,7 +136,7 @@ UI.Texture.prototype.onChange = function ( callback ) {
 
 // Outliner
 
-UI.Outliner = function () {
+UI.Outliner = function ( editor ) {
 
 	UI.Element.call( this );
 
@@ -146,9 +146,14 @@ UI.Outliner = function () {
 	dom.className = 'Outliner';
 	dom.tabIndex = 0;	// keyup event is ignored without setting tabIndex
 
-	Sortable.create( dom, {
+	var scene = editor.scene;
+
+	var sortable = Sortable.create( dom, {
+		draggable: '.draggable',
 		onUpdate: function ( event ) {
-			console.log( event );
+			var object = scene.getObjectById( scope.options[ event.oldIndex ].value );
+			var preObject = scene.getObjectById( scope.options[ event.newIndex ].value );
+			editor.parent( object, preObject.parent );
 		}
 	} );
 
@@ -224,7 +229,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 		var option = options[ i ];
 
 		var div = document.createElement( 'div' );
-		div.className = 'option';
+		div.className = 'option ' + ( option.static === true ? '': 'draggable' );
 		div.innerHTML = option.html;
 		div.value = option.value;
 		scope.dom.appendChild( div );