From eff0ef027a2defddf02d91fca487dbce11655eac Mon Sep 17 00:00:00 2001
From: Rune Strand <rune@umbraco.com>
Date: Wed, 18 Nov 2015 12:13:51 +0100
Subject: [PATCH] Add cloned content when sorting

---
 .../src/less/gridview.less                    | 30 ++++++-------------
 .../propertyeditors/grid/grid.controller.js   | 18 +++++++----
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 54dea38652..23c27d0866 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -13,11 +13,9 @@
 
  .umb-grid .ui-sortable-helper  {
      position:absolute !important;
-    //  border: dashed 1px #000 !important;
      background-color: @blue;
-     opacity: 0.4;
-     height: auto !important;
-     width: 150px !important;
+     height: 50px !important;
+     width: 50px !important;
      overflow: hidden;
      padding: 5px;
      border-radius:2px;
@@ -26,15 +24,15 @@
      box-shadow: 3px 3px 12px 0px rgba(50, 50, 50, 0.45);
  }
 
- // .umb-grid .ui-sortable-helper:after {
- //     line-height: 15px;
- //     font-size: 25px;
- //     content: "\e14e";
- //     color: #ffffff;
- // }
+ .umb-grid .ui-sortable-helper:after {
+     line-height: 50px;
+     font-size: 25px;
+     content: "\e14e";
+     color: #ffffff;
+ }
 
  .umb-grid .ui-sortable-helper *{
-    //  display: none;
+     display: none;
      border: none !important;
      background: none !important;
      color: #ffffff !important;
@@ -51,7 +49,6 @@
  .umb-grid .ui-sortable-placeholder{
     position: absolute;
     width: 100%;
-    color: @gray;
     background-color:@blue;
     height: 2px;
     margin-bottom: 20px;
@@ -75,15 +72,6 @@
     right: -5px;
     content: "\e0d7";
 }
- // .umb-grid .ui-sortable-placeholder:hover{
- //     border-color: @gray;
- // }
- //
- // .umb-grid .ui-sortable-placeholder:before{
- //     content: "\e1bd";
- // }
-
-
 
  // utils
  // -------------------------
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
index aa423ee661..2bb7848ed9 100644
--- 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
@@ -22,18 +22,19 @@ angular.module("umbraco")
             cursor: "move",
             placeholder: "ui-sortable-placeholder",
             handle: ".cell-tools-move",
+            helper: "clone",
             forcePlaceholderSize: true,
             tolerance: "pointer",
             zIndex: 999999999999999999,
             scrollSensitivity: 100,
-            cursorAt: {
-                top: 45,
-                left: 90
-            },
+            // cursorAt: {
+            //     top: 45,
+            //     left: 90
+            // },
 
             sort: function (event, ui) {
                 /* prevent vertical scroll out of the screen */
-                var max = $(".usky-grid").width() - 150;
+                var max = $(".umb-grid").width() - 150;
                 if (parseInt(ui.helper.css("left")) > max) {
                     ui.helper.css({ "left": max + "px" });
                 }
@@ -43,6 +44,10 @@ angular.module("umbraco")
             },
 
             start: function (e, ui) {
+
+                ui.item.context.style.opacity = "0.5";
+                ui.item.context.style.display = "block";
+
                 draggedRteSettings = {};
                 ui.item.find(".mceNoEditor").each(function () {
                     // remove all RTEs in the dragged row and save their settings
@@ -53,6 +58,9 @@ angular.module("umbraco")
             },
 
             stop: function (e, ui) {
+
+                ui.item.context.style.opacity = "1";
+
                 // reset all RTEs affected by the dragging
                 ui.item.parents(".usky-column").find(".mceNoEditor").each(function () {
                     var id = $(this).attr("id");