diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 5033dacb2d..f67b1d804c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/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; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js index 463c635570..cc13dd33c9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js +++ b/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("