Get drag and drop moving working

services/web/app/views/project/editor/file-tree.jade

@@ -51,21 +51,43 @@ script(type='text/ng-template', id='entityListItemTemplate')
 		ng-class="{ 'selected': entity.selected }",
 		ng-controller="FileTreeEntityController"
 	)
-		.entity
+		.entity(ng-if="entity.type != 'folder'")
 			.entity-name(
 				ng-click="select()"
 				ng-dblclick="startRenaming()"
+				draggable
 			)
 				//- Just a spacer to align with folders
 				i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")
+
+				i.fa.fa-fw.fa-file(ng-if="entity.type == 'doc'")
+				i.fa.fa-fw.fa-image(ng-if="entity.type == 'file'")
+
+				span(
+					ng-hide="entity.renaming"
+				)  {{ entity.name }}
+				input(
+					ng-show="entity.renaming",
+					ng-model="inputs.name",
+					ng-blur="finishRenaming()",
+					focus-input="entity.renaming",
+					on-enter="finishRenaming()"
+				)
+
+		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
+			.entity-name(
+				ng-click="select()"
+				ng-dblclick="startRenaming()"
+				draggable
+				droppable
+				on-drop-callback="onDrop"
+			)
 				i.fa.fa-fw.toggle(
 					ng-if="entity.type == 'folder'"
 					ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}"
 					ng-click="toggleExpanded()"
 				)
 
-				i.fa.fa-fw.fa-file(ng-if="entity.type == 'doc'")
-				i.fa.fa-fw.fa-image(ng-if="entity.type == 'file'")
 				i.fa.fa-fw(
 					ng-if="entity.type == 'folder'"
 					ng-class="{\
@@ -89,8 +111,13 @@ script(type='text/ng-template', id='entityListItemTemplate')
 			ul.list-unstyled(
 				ng-if="entity.type == 'folder'"
 				ng-show="expanded"
+				droppable
+				on-drop-callback="onDrop"
 			)
-				file-entity(entity="child", ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']")
+				file-entity(
+					entity="child",
+					ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
+				)
 			
 script(type='text/ng-template', id='newDocModalTemplate')
 	.modal-header

services/web/public/coffee/app/ide/file-tree/FileTreeManager.coffee

@@ -1,7 +1,10 @@
 define [
 	"ide/file-tree/directives/fileEntity"
+	"ide/file-tree/directives/draggable"
+	"ide/file-tree/directives/droppable"
 	"ide/file-tree/controllers/FileTreeController"
 	"ide/file-tree/controllers/FileTreeEntityController"
+	"ide/file-tree/controllers/FileTreeFolderController"
 ], () ->
 	class FileTreeManager
 		constructor: (@ide, @$scope) ->
@@ -51,6 +54,12 @@ define [
 				@$scope.$apply () =>
 					@_deleteEntityFromScope entity
 
+			@ide.socket.on "reciveEntityMove", (entity_id, folder_id) =>
+				entity = @findEntityById(entity_id)
+				folder = @findEntityById(folder_id)
+				@$scope.$apply () =>
+					@_moveEntityInScope(entity, folder)
+
 		findEntityById: (id) ->
 			@_findEntityByIdInFolder @$scope.rootFolder, id
 
@@ -196,6 +205,22 @@ define [
 				failure: (error) -> callback(error)
 			}
 
+		moveEntity: (entity, parent_folder, callback = (error) ->) ->
+			@_moveEntityInScope(entity, parent_folder)
+			$.ajax {
+				url:  "/project/#{@ide.project_id}/#{entity.type}/#{entity.id}/move"
+				type: "POST"
+				contentType: "application/json; charset=utf-8"
+				headers:
+					"X-Csrf-Token": window.csrfToken
+				data: JSON.stringify {
+					folder_id: parent_folder.id
+				}
+				dataType: "json"
+				success: () -> callback()
+				failure: (error) -> callback(error)
+			}
+
 		_deleteEntityFromScope: (entity) ->
 			parent_folder = null
 			@forEachEntity (possible_entity, folder) ->
@@ -206,3 +231,8 @@ define [
 				index = parent_folder.children.indexOf(entity)
 				if index > -1
 					parent_folder.children.splice(index, 1)
+
+		_moveEntityInScope: (entity, parent_folder) ->
+			return if entity in parent_folder.children
+			@_deleteEntityFromScope(entity)
+			parent_folder.children.push(entity)

services/web/public/coffee/app/ide/file-tree/controllers/FileTreeController.coffee

@@ -22,8 +22,8 @@ define [
 			)
 
 		$scope.orderByFoldersFirst = (entity) ->
-			return 0 if entity.type == "folder"
-			return 1
+			return '0' if entity.type == "folder"
+			return '1'
 
 		$scope.startRenamingSelected = () ->
 			$scope.$broadcast "rename:selected"

services/web/public/coffee/app/ide/file-tree/controllers/FileTreeEntityController.coffee

@@ -29,12 +29,6 @@ define [
 
 		$scope.$on "delete:selected", () ->
 			$scope.openDeleteModal() if $scope.entity.selected
-
-		if $scope.entity.type == "folder"
-			$scope.expanded = false
-
-			$scope.toggleExpanded = () ->
-				$scope.expanded = !$scope.expanded
 	]
 
 	App.controller "DeleteEntityModalController", [

services/web/public/coffee/app/ide/file-tree/controllers/FileTreeFolderController.coffee

@@ -0,0 +1,20 @@
+define [
+	"base"
+], (App) ->
+	App.controller "FileTreeFolderController", ["$scope", "ide", ($scope, ide) ->
+		$scope.expanded = false
+
+		$scope.toggleExpanded = () ->
+			$scope.expanded = !$scope.expanded
+
+		$scope.onDrop = (events, ui) ->
+			source = $(ui.draggable).scope().entity
+			ide.fileTreeManager.moveEntity(source, $scope.entity)
+
+		$scope.orderByFoldersFirst = (entity) ->
+			# We need this here as well as in FileTreeController
+			# since the file-entity diretive creates a new scope
+			# that doesn't inherit from previous scopes.
+			return '0' if entity.type == "folder"
+			return '1'
+	]

services/web/public/coffee/app/ide/file-tree/directives/draggable.coffee

@@ -0,0 +1,12 @@
+define [
+	"base"
+], (App) ->
+	App.directive "draggable", () ->
+		return {
+			link: (scope, element, attrs) ->
+				element.draggable
+					delay: 250
+					opacity: 0.7
+					helper: "clone"
+					scroll: true
+		}

services/web/public/coffee/app/ide/file-tree/directives/droppable.coffee

@@ -0,0 +1,14 @@
+define [
+	"base"
+], (App) ->
+	App.directive "droppable", () ->
+		return {
+			scope: {
+				onDropCallback: "="
+			}
+			link: (scope, element, attrs) ->
+				element.droppable
+					greedy: true
+					hoverClass: "droppable-hover"
+					drop: scope.onDropCallback
+		}

services/web/public/stylesheets/app/editor.less

@@ -99,6 +99,9 @@
 				input {
 					line-height: 1.6;
 				}
+				&.droppable-hover {
+					background-color: @file-tree-droppable-background-color;
+				}
 			}
 
 			i.fa-folder-open, i.fa-folder {
@@ -130,6 +133,10 @@
 			}
 		}
 	}
+
+	ul.droppable-hover {
+		background-color: @file-tree-droppable-background-color;
+	}
 }
 
 .ui-layout-resizer {

services/web/public/stylesheets/core/variables.less

@@ -817,3 +817,4 @@
 // Custom
 
 @toolbar-border-color: @gray-lighter;
+@file-tree-droppable-background-color: rgb(252, 231, 199);