Modify sortable table row

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -628,8 +628,16 @@ ul.color-picker li a  {
 
 /* sortable placeholder */
 .umb-relatedlinks .sortable-placeholder {
-    //background-color: #fff;
-    margin-bottom: 47px;
+    background-color: #efefef;
+    display: table-row;
+}
+.umb-relatedlinks .sortable-placeholder > td {
+    display: table-cell;
+    padding: 8px;
+}
+.umb-relatedlinks .ui-sortable-helper {
+    background-color: #fff;
+    opacity: 0.5;
 }
 
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js

@@ -75,6 +75,9 @@
                 $scope.model.value[idx].edit = true;
             };
   
+            $scope.cancelEdit = function (idx) {
+                $scope.model.value[idx].edit = false;
+            };
 
             $scope.saveEdit = function (idx) {
                 $scope.model.value[idx].title = $scope.model.value[idx].caption;
@@ -159,6 +162,8 @@
                 cursor: 'move',
                 cancel: '.no-drag',
                 containment: 'parent',
+                placeholder: 'sortable-placeholder',
+                forcePlaceholderSize: true,
                 helper: function (e, ui) {
                     // When sorting table rows, the cells collapse. This helper fixes that: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
                     ui.children().each(function () {
@@ -178,6 +183,24 @@
                     var movedElement = $scope.model.value[originalIndex];
                     $scope.model.value.splice(originalIndex, 1);
                     $scope.model.value.splice(newIndex, 0, movedElement);
+                },
+                start: function (e, ui) {
+                    //ui.placeholder.html("<td colspan='5'></td>");
+
+                    // Build a placeholder cell that spans all the cells in the row: http://stackoverflow.com/questions/25845310/jquery-ui-sortable-and-table-cell-size
+                    var cellCount = 0;
+                    $('td, th', ui.helper).each(function () {
+                        // For each td or th try and get it's colspan attribute, and add that or 1 to the total
+                        var colspan = 1;
+                        var colspanAttr = $(this).attr('colspan');
+                        if (colspanAttr > 1) {
+                            colspan = colspanAttr;
+                        }
+                        cellCount += colspan;
+                    });
+
+                    // Add the placeholder UI - note that this is the item's content, so td rather than tr
+                    ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
                 }
             };
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html

@@ -45,6 +45,7 @@
                     </div>
                     <div class="btn-group" ng-show="link.edit" style="margin-left: 0;">
                         <button type="button" class="btn btn-default" ng-click="saveEdit($index)"><localize key="buttons_save">Save</localize></button>
+                        <button type="button" class="btn btn-default" ng-click="cancelEdit($index)"><localize key="general_cancel">Cancel</localize></button>
                     </div>
                 </td>
             </tr>