MC-4262: Column Rearranging Drop Zone Indicators Are Too Small & Sometimes Hard To Activate

- Show better indicator when dragging columns

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_drag-drop.less

@@ -45,7 +45,8 @@
     }
 }
 
-.pagebuilder-content-type-wrapper.ui-sortable-helper {
+.pagebuilder-content-type-wrapper.ui-sortable-helper,
+.pagebuilder-content-type.ui-draggable-dragging {
     opacity: .7;
 
     .pagebuilder-options {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_default.less

@@ -44,8 +44,6 @@
             opacity: 0;
             position: absolute;
             top: -1px;
-            transform: translateX(-3px);
-            transition: .5s opacity;
             visibility: hidden;
             width: 6px;
             z-index: 26;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

@@ -802,11 +802,25 @@ export default class Preview extends PreviewCollection {
 
                 if (this.movePosition) {
                     this.dropPlaceholder.removeClass("left right");
+                    const width = dragColumn.preview.element.outerWidth();
+                    let left = (this.movePosition.placement === "left" ? this.movePosition.left : null);
+                    // The right position is only used when moving a column to the last position in the group
+                    const right = (this.movePosition.placement === "right" ?
+                            groupPosition.outerWidth - this.movePosition.right : null
+                    );
+                    /**
+                     * If we're dragging the column from the left to the right we need to show the placeholder on
+                     * the left hand side.
+                     */
+                    if (left !== null && this.parent.children().indexOf(dragColumn) <
+                            this.parent.children().indexOf(this.movePosition.affectedColumn)
+                    ) {
+                        left = left - width;
+                    }
                     this.movePlaceholder.css({
-                        left: (this.movePosition.placement === "left" ? this.movePosition.left : ""),
-                        right: (this.movePosition.placement === "right" ?
-                                groupPosition.outerWidth - this.movePosition.right - 5 : ""
-                        ),
+                        width,
+                        left,
+                        right,
                     }).addClass("active");
                 } else {
                     this.movePlaceholder.removeClass("active");