U4-5793 prevent drag element off screen vertically

antoine · antoine · commit 656ba98b1b21 · 2014-11-13T21:29:18.000+01:00
diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -10,8 +10,9 @@
 
  // Sortabel
  // -------------------------
+
  .usky-grid .ui-sortable-helper  {
-     position:absolute;
+     position:absolute !important;
      border: dashed 1px #000 !important;
      background: #ccc;
      opacity: 0.4;
@@ -44,8 +45,9 @@
      text-align: center;
      font-size: 85px;
      line-height: 65px;
-     color: @grayLighter;
+     color: @gray;
      vertical-align: middle;
+     background-color:@grayLighter;
  }
 
  .usky-grid .ui-sortable-placeholder:hover{
@@ -138,6 +140,7 @@
 .usky-grid .usky-cell{
      position: relative;
      border: 1px dashed rgba(0,0,0,0);
+     min-height:127px;
 }
 
 .usky-grid  .cell-tools {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -28,6 +28,17 @@ angular.module("umbraco")
                 left: 90
             },
 
+            sort: function (event, ui) {
+                /* prevent vertical scroll out of the screen */
+                var max = $(".usky-grid").width() - 150;
+                if (parseInt(ui.helper.css('left')) > max) {
+                    ui.helper.css({ 'left': max + "px" })
+                }
+                if (parseInt(ui.helper.css('left')) < 20) {
+                    ui.helper.css({ 'left': 20 })
+                }
+            },
+
             start: function (e, ui) {
                 ui.item.find('.mceNoEditor').each(function () {
                     tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
@@ -46,7 +57,6 @@ angular.module("umbraco")
         var cancelMove = false;
 
         $scope.sortableOptionsCell = {
-
             distance: 10,
             cursor: "move",
             placeholder: "ui-sortable-placeholder",
@@ -61,6 +71,18 @@ angular.module("umbraco")
                 left: 90
             },
 
+            sort: function (event, ui) {
+                /* prevent vertical scroll out of the screen */
+                var position = parseInt(ui.item.parent().offset().left) + parseInt(ui.helper.css('left')) - parseInt($(".usky-grid").offset().left);
+                var max = $(".usky-grid").width() - 220;
+                if (position > max) {
+                    ui.helper.css({ 'left': max - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" })
+                }
+                if (position < 0) {
+                    ui.helper.css({ 'left': 0 - parseInt(ui.item.parent().offset().left) + parseInt($(".usky-grid").offset().left) + "px" })
+                }
+            },
+
             over: function (event, ui) {
                 allowedEditors = $(event.target).scope().area.allowed;
 
@@ -527,7 +549,6 @@ angular.module("umbraco")
         };
 
 
-
         // *********************************************
         // Init control
         // *********************************************
