sorting tree

public/less/admin/manage/categories.less

@@ -18,15 +18,11 @@ div.categories {
   li {
     min-height: @acp-line-height;
     margin: @acp-base-line 0;
-  }
 
-  > ul > li + li:before {
+    &.placeholder {
-    content: "";
+      border: 1px dashed #2196F3;
-    display: block;
+      background-color: #E1F5FE;
-    height: 1px;
+    }
-    width: 100%;
-    margin: @acp-base-line;
-    background: #F5F5F5;
   }
 
   .disabled {
@@ -50,10 +46,11 @@ div.categories {
     background-size: cover;
     float: left;
     margin-right: @acp-margin;
+    cursor: move;
   }
 
   .information {
-    float:left;
+    float: left;
   }
 
   .header {

public/src/admin/manage/categories.js

@@ -2,7 +2,7 @@
 /*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
 
 define('admin/manage/categories', function() {
-	var	Categories = {};
+	var	Categories = {}, newCategoryId = -1, sortables;
 
 	Categories.init = function() {
 		socket.emit('admin.categories.getAll', function(error, payload){
@@ -13,21 +13,6 @@ define('admin/manage/categories', function() {
 			Categories.render(payload);
 		});
 
-		function updateCategoryOrders(evt, ui) {
-			var categories = $(evt.target).children(),
-				modified = {},
-				cid;
-
-			for(var i=0;i<categories.length;i++) {
-				cid = $(categories[i]).attr('data-cid');
-				modified[cid] = {
-					order: i+1
-				};
-			}
-
-			socket.emit('admin.categories.update', modified);
-		}
-
 		$('button[data-action="create"]').on('click', Categories.create);
 	};
 
@@ -68,34 +53,79 @@ define('admin/manage/categories', function() {
                 .text('You have no active categories.')
                 .appendTo(container);
         }else{
-            renderList(categories, 0, container);
+            sortables = {};
+            renderList(categories, 0, container, 0);
         }
 	};
 
-    function renderList(categories, level, parent){
+	function itemDidAdd(e){
-        var i = 0, len = categories.length, category, list = $('<ul></ul>'), marginLeft = 48, listItem;
+        newCategoryId = e.to.dataset.cid;
+	}
+
+	function itemDragDidEnd(e){
+        var isCategoryUpdate = (newCategoryId != -1);
+		//Update needed?
+		if((e.newIndex != undefined && e.oldIndex != e.newIndex) || isCategoryUpdate){
+            var parentCategory = isCategoryUpdate ? sortables[newCategoryId] : sortables[e.from.dataset.cid],
+                modified = {}, i = 0, list = parentCategory.toArray(), len = list.length;
+
+            for(i; i < len; ++i) {
+                modified[list[i]] = {
+                    order: (i + 1)
+                }
+            }
+
+            if(isCategoryUpdate){
+                modified[e.item.dataset.cid]['parentCid'] = newCategoryId;
+            }
+
+            newCategoryId = -1
+            socket.emit('admin.categories.update', modified);
+        }
+	}
+
+    /**
+     * Render categories - recursively
+     *
+     * @param categories {array} categories tree
+     * @param level {number} current sub-level of rendering
+     * @param container {object} parent jquery element for the list
+     * @param parentId {number} parent category identifier
+     */
+    function renderList(categories, level, container, parentId){
+        var i = 0, len = categories.length, category, marginLeft = 48, listItem;
+        var list = $('<ul />', {'data-cid': parentId});
+
+		if(level > 0){
+			list.css('margin-left', marginLeft);
+		}
 
         for(i; i < len; ++i){
             category = categories[i];
 
-             listItem = $('<li></li>')
+             listItem = $('<li></li>', {'data-cid': category.cid})
                  .append(renderListItem(category))
                  .appendTo(list);
 
-			if(level > 0){
-				listItem.css('margin-left', marginLeft);
-			}
-
             if(category.disabled){
                 listItem.addClass('disabled');
             }
 
             if(category.children.length > 0){
-                renderList(category.children, level + 1, listItem);
+                renderList(category.children, level + 1, listItem, category.cid);
             }
         }
 
-        list.appendTo(parent);
+        list.appendTo(container);
+		sortables[parentId] = Sortable.create(list[0], {
+			group: 'cross-categories',
+			animation: 150,
+			handle: '.icon',
+            dataIdAttr: 'data-cid',
+			ghostClass: "placeholder",
+			onAdd: itemDidAdd,
+			onEnd: itemDragDidEnd
+		});
     }
 
     function renderListItem(categoryEntity){