more work on the sorting, almost works on tables now too

src/Umbraco.Web.UI.Client/src/common/directives/editors/umbsort.directive.js

@@ -33,6 +33,11 @@ angular.module("umbraco.directives")
                 scope.opts.nested= cfg.nested || true,
                 scope.opts.drop= cfg.drop || true,
                 scope.opts.drag= cfg.drag || true,
+                scope.opts.clone = cfg.clone || "<li/>";
+                scope.opts.mode = cfg.mode || "list";
+
+                scope.opts.itemSelectorFull = $.trim(scope.opts.itemPath + " " + scope.opts.itemSelector);
+
                 /*
                 scope.opts.isValidTarget = function(item, container) {
                         if(container.el.is(".umb-" + scope.opts.group + "-container")){
@@ -46,25 +51,30 @@ angular.module("umbraco.directives")
                 element.addClass("umb-" + cfg.group + "-container");
 
                 scope.opts.onDrag = function (item, position)  {
-                    item.css({
-                          left: position.left - adjustment.left,
-                          top: position.top - adjustment.top
-                        });
+                    if(scope.opts.mode === "list"){
+                      item.css({
+                            left: position.left - adjustment.left,
+                            top: position.top - adjustment.top
+                          });  
+                    }
                 };
 
 
                 scope.opts.onDrop = function (item, targetContainer, _super)  {
-                      var clonedItem = $('<li/>').css({height: 0});
-                      item.after(clonedItem);
-                      clonedItem.animate({'height': item.height()});
                       
-                      item.animate(clonedItem.position(), function  () {
-                         clonedItem.detach();
-                         _super(item);
-                      });
+                      if(scope.opts.mode === "list"){
+                        //list mode
+                        var clonedItem = $(scope.opts.clone).css({height: 0});
+                        item.after(clonedItem);
+                        clonedItem.animate({'height': item.height()});
+                        
+                        item.animate(clonedItem.position(), function  () {
+                           clonedItem.detach();
+                           _super(item);
+                        });
+                      }
 
-
-                      var children = $("li", targetContainer.el);
+                      var children = $(scope.opts.itemSelectorFull, targetContainer.el);
                       var targetIndex = children.index(item);
                       var targetScope = $(targetContainer.el[0]).scope();
                       
@@ -110,10 +120,6 @@ angular.module("umbraco.directives")
                             umbSortContextInternal.sourceScope.opts.onReleaseHandler.call(this, item, _args);
                         }
                       }
-                      
-
-                      
-                      
                 };
 
                 scope.changeIndex = function(from, to){
@@ -138,7 +144,7 @@ angular.module("umbraco.directives")
                 };
 
                 scope.opts.onDragStart = function (item, container, _super) {
-                      var children = $("li", container.el);
+                      var children = $(scope.opts.itemSelectorFull, container.el);
                       var offset = item.offset();
                       
                       umbSortContextInternal.sourceIndex = children.index(item);

src/Umbraco.Web.UI.Client/src/less/dragdrop.less

@@ -9,21 +9,22 @@ body.dragging, body.dragging * {
 }
 
 .umb-sort li{
-	display: block;
+	  display: block;
     margin: 5px;
     padding: 5px;
     border: 1px solid #CCC;
     background: @grayLighter;
 }
 
-.umb-sort li.placeholder {
+.umb-sort .placeholder {
   position: relative;
   margin: 0;
   padding: 0;
   border: none;
 }
-.umb-sort li.placeholder:before {
-  	position: absolute;
+
+.umb-sort .placeholder:before {
+  position: absolute;
 	content: "";
 	width: 0;
 	height: 0;

src/Umbraco.Web.UI.Client/src/views/content/content.sort.controller.js

@@ -21,7 +21,15 @@ function ContentSortController($scope, contentResource, treeService) {
 
     $scope.sortOptions ={
         group: "pages",
+        containerSelector: 'table',
+        itemPath: '> tbody',
+        itemSelector: 'tr',
+        placeholder: '<tr class="placeholder"/>',
+        clone: "<tr />",
+        mode: "table",
         onSortHandler: function(item, args){
+
+
             args.scope.changeIndex(args.oldIndex, args.newIndex);
         }
     };

src/Umbraco.Web.UI.Client/src/views/content/sort.html

@@ -1,11 +1,26 @@
 <div class="umb-pane" ng-controller="Umbraco.Editors.Content.SortController">
 
+<!--
 <ul umb-sort="sortOptions" 
     ng-model="pagesToSort"> 
 	<li ng-repeat="page in pagesToSort">
 		<i class="icon-navigation handle"></i> {{page.name}}
 	</li>	
-</ul>
+</ul>-->
+
+<table 
+	umb-sort="sortOptions" 
+    ng-model="pagesToSort">
+	<thead>
+		<tr><th>Name</th></tr>
+	</thead>
+	<tbody>
+		<tr ng-repeat="page in pagesToSort">
+			<td><i class="icon-navigation handle"></i> {{page.name}}</td>
+		</tr>	
+	</tbody>
+</table>
+
 {{ pagesToSort | json}}
 </div>