Improve styling of handle-less BorderBox rows

Author: myabc

frontend/src/global_styles/primer/_overrides.sass

@@ -156,6 +156,12 @@ ul.SegmentedControl,
   .ActionListItem-label[class^="__hl_"], .ActionListItem-label[class*=" __hl_"]
     color: var(--control-fgColor-disabled) !important
 
+// hide hover when dragging with legacy Dragula implementation
+.Box-row--hover-gray,
+.Box-row--hover-blue
+  body[data-dragging="active"] &
+    background-color: unset
+
 .Box-row--focus-gray
   &:focus-visible
     background-color: var(--bgColor-muted)
@@ -170,6 +176,19 @@ ul.SegmentedControl,
 .Box-row--draggable:not(.Box-row--clickable)
   cursor: grab
 
+.Box-row--draggable
+  &[data-dragging="mirror"]
+    background-color: var(--bgColor-default)
+    border: var(--borderWidth-default) solid var(--borderColor-default)
+    border-radius: var(--borderRadius-medium)
+    box-shadow: var(--shadow-floating-medium)
+    opacity: 1
+
+  &[data-dragging="source"]
+    opacity: 0.4
+    background-color: var(--bgColor-subtle)
+    box-shadow: inset 0 0 0 var(--borderWidth-default) var(--borderColor-muted)
+
 // Apply the mobile styles as soon as the banner itself is small
 // Styles are copied from the PVC repo
 .op-primer-flash

frontend/src/stimulus/controllers/dynamic/generic-drag-and-drop.controller.ts

@@ -129,14 +129,19 @@ export default class GenericDragAndDropController extends Controller {
         mirrorContainer: this.resolveMirrorContainer(),
       },
     )
+      .on('cloned', (clone, _original, type) => {
+        clone.setAttribute('data-dragging', type);
+      })
       .on('drag', (el, source) => {
         this.dragOriginSource = source;
         this.dragOriginNextSibling = el.nextElementSibling;
 
+        el.setAttribute('data-dragging', 'source');
         document.body.setAttribute('data-dragging', 'active');
         this.ariaPressedTarget(el)?.setAttribute('aria-pressed', 'true');
       })
       .on('dragend', (el) => {
+        el.removeAttribute('data-dragging');
         document.body.removeAttribute('data-dragging');
         this.ariaPressedTarget(el)?.setAttribute('aria-pressed', 'false');
       })