DashboardLayoutOrchestrator: Refine drag drop logic (#106079)

e2e/dashboard-new-layouts/dashboards-move-panel.spec.ts

@@ -30,4 +30,30 @@ describe('Dashboard', () => {
           .should('be.higherThan', panel3);
       });
   });
+
+  // Note, moving a panel from a nested row to a parent row currently just deletes the panel
+  // This test will need to be updated once the correct behavior is implemented.
+  it('can move panel from nested row to parent row', () => {
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.groupIntoRow();
+    e2e.flows.scenes.groupIntoRow();
+
+    cy.get('[data-testid="data-testid dashboard-row-title-New row"]')
+      .first()
+      .then((el) => {
+        const rect = el.offset();
+        e2e.components.Panels.Panel.headerContainer()
+          .contains(/^Panel one$/)
+          .trigger('pointerdown', { which: 1 })
+          .trigger('pointermove', { clientX: rect.left, clientY: rect.top })
+          .trigger('pointerup');
+      });
+
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel one$/)
+      .should('not.exist');
+  });
 });

public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx

@@ -101,13 +101,17 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
   }
 
   private _getDropTargetUnderMouse(evt: MouseEvent): DashboardDropTarget | null {
-    const key = document
-      .elementsFromPoint(evt.clientX, evt.clientY)
-      ?.find((element) => {
-        const key = element.getAttribute('data-dashboard-drop-target-key');
+    const elementsUnderPoint = document.elementsFromPoint(evt.clientX, evt.clientY);
+    const cursorIsInSourceTarget = elementsUnderPoint.some(
+      (el) => el.getAttribute('data-dashboard-drop-target-key') === this._sourceDropTarget?.state.key
+    );
 
-        return !!key && key !== this._sourceDropTarget?.state.key;
-      })
+    if (cursorIsInSourceTarget) {
+      return null;
+    }
+
+    const key = elementsUnderPoint
+      ?.find((element) => element.getAttribute('data-dashboard-drop-target-key'))
       ?.getAttribute('data-dashboard-drop-target-key');
 
     if (!key) {