diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index c2c80322cc2..2b41711f2e6 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
@@ -391,7 +391,7 @@ export function PanelChrome({
           onPointerDown={onPointerDown}
           onMouseEnter={isSelectable ? onHeaderEnter : undefined}
           onMouseLeave={isSelectable ? onHeaderLeave : undefined}
-          onPointerUp={onPointerUp}
+          // onPointerUp={onPointerUp}
           onDragStart={(evt) => evt.dataTransfer.setData('text/plain', '')}
         >
           {statusMessage && (
diff --git a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx
index 5426fa936ab..d2993b97328 100644
--- a/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx
@@ -29,8 +29,8 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
 
   private _activationHandler() {
     return () => {
-      document.body.removeEventListener('pointermove', this._onPointerMove);
-      document.body.removeEventListener('pointerup', this._onPointerUp);
+      window.removeEventListener('pointermove', this._onPointerMove);
+      window.removeEventListener('pointerup', this._onPointerUp);
       document.body.classList.remove('dashboard-draggable-transparent-selection');
     };
   }
@@ -72,6 +72,8 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
   }
 
   public startDragging(evt: ReactPointerEvent, layoutItem: DashboardLayoutItem, layoutGrid: DashboardLayoutGrid) {
+    console.log('started');
+
     this._pointerDistance.set(evt);
 
     this._isSelectedObject = false;
@@ -79,15 +81,15 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
     this._currentGrid = layoutGrid;
     this._layoutItem = layoutItem;
 
+    window.addEventListener('pointermove', this._onPointerMove);
+    window.addEventListener('pointerup', this._onPointerUp);
+    document.body.classList.add('dashboard-draggable-transparent-selection');
+
     this._grids = this._findAllGrids();
 
     this._grids.forEach((grid) =>
       grid.onDragStart?.(this._sourceGrid!, this._layoutItem!, evt.nativeEvent)
     );
-
-    document.body.addEventListener('pointermove', this._onPointerMove);
-    document.body.addEventListener('pointerup', this._onPointerUp);
-    document.body.classList.add('dashboard-draggable-transparent-selection');
   }
 
   private _onPointerMove(evt: PointerEvent) {
@@ -111,8 +113,10 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
   }
 
   private _onPointerUp(evt: PointerEvent) {
-    document.body.removeEventListener('pointermove', this._onPointerMove);
-    document.body.removeEventListener('pointerup', this._onPointerUp);
+    console.error('should stop!');
+
+    window.removeEventListener('pointermove', this._onPointerMove);
+    window.removeEventListener('pointerup', this._onPointerUp);
     document.body.classList.remove('dashboard-draggable-transparent-selection');
 
     // Wrapped in setTimeout to ensure that any event handlers are called
diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx
index 5fbbb499a04..78d9ed2b244 100644
--- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx
@@ -61,7 +61,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
   public static Component = AutoGridLayoutRenderer;
 
   public containerRef = createRef<HTMLDivElement>();
-  private _draggedGridItem: AutoGridItem | null = null;
+  private _draggingGridItem: AutoGridItem | null = null;
   private _initialGridItemPosition: {
     pageX: number;
     pageY: number;
@@ -128,34 +128,16 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
   }
 
   public onDragStart(sourceGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem, evt: PointerEvent) {
-    // if (!this._canDrag(evt)) {
-    //   return;
-    // }
-    //
-    // if (!(layoutItem instanceof AutoGridItem)) {
-    //   throw new Error('Dragging wrong item');
-    // }
+    if (sourceGrid === this._getLayoutManager() && layoutItem instanceof AutoGridItem) {
+      this._draggingGridItem = layoutItem;
 
-    if (layoutItem instanceof AutoGridItem) {
-      this._draggedGridItem = sourceGrid === this._getLayoutManager() ? layoutItem : layoutItem.clone();
-    } else {
-      this._draggedGridItem = new AutoGridItem({
-        body: layoutItem.getElementBody().clone(),
-      });
-    }
-
-    if (!this.state.children.includes(this._draggedGridItem)) {
-      this.setState({ children: [...this.state.children, this._draggedGridItem] });
-    }
-
-    setTimeout(() => {
-      const { top, left, width, height } = this._draggedGridItem!.getBoundingBox();
+      const { top, left, width, height } = this._draggingGridItem!.getBoundingBox();
       this._initialGridItemPosition = { pageX: evt.pageX, pageY: evt.pageY, top, left: left };
       this._updatePanelSize(width, height);
       this._updatePanelPosition(top, left);
 
-      this.setState({ draggingKey: this._draggedGridItem!.state.key });
-    });
+      this.setState({ draggingKey: this._draggingGridItem!.state.key });
+    }
   }
 
   public onDrag(
@@ -164,6 +146,44 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
     layoutItem: DashboardLayoutItem,
     evt: PointerEvent
   ) {
+    const layoutManager = this._getLayoutManager();
+
+    if (targetGrid === layoutManager) {
+      if (this._draggingGridItem) {
+        return;
+      }
+
+      if (sourceGrid === layoutManager) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        this._draggingGridItem = layoutItem as AutoGridItem;
+
+        const { top, left, width, height } = this._draggingGridItem!.getBoundingBox();
+        this._updatePanelSize(width, height);
+        this._updatePanelPosition(top, left);
+
+        if (this.state.draggingKey !== this._draggingGridItem!.state.key) {
+          this.setState({ draggingKey: this._draggingGridItem!.state.key });
+        }
+      } else {
+        if (layoutItem instanceof AutoGridItem) {
+          this._draggingGridItem = layoutItem.clone();
+          this.setState({ children: [...this.state.children, this._draggingGridItem!], draggingKey: this._draggingGridItem!.state.key });
+        } else {
+          this._draggingGridItem = new AutoGridItem({ body: layoutItem.getElementBody().clone() });
+          this.setState({ children: [...this.state.children, this._draggingGridItem!], draggingKey: this._draggingGridItem!.state.key });
+        }
+      }
+    } else {
+      if (!this._draggingGridItem) {
+        return;
+      }
+
+      if (sourceGrid !== layoutManager) {
+        this.setState({ children: this.state.children.filter((child) => child !== this._draggingGridItem!), draggingKey: undefined });
+        this._draggingGridItem = null;
+      }
+    }
+
     this._updatePanelPosition(
       this._initialGridItemPosition!.top + (evt.pageY - this._initialGridItemPosition!.pageY),
       this._initialGridItemPosition!.left + (evt.pageX - this._initialGridItemPosition!.pageX)
@@ -174,7 +194,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
       ?.find((element) => {
         const key = element.getAttribute('data-auto-grid-item-drop-target');
 
-        return !!key && key !== this._draggedGridItem!.state.key;
+        return !!key && key !== this._draggingGridItem!.state.key;
       })
       ?.getAttribute('data-auto-grid-item-drop-target');
 
@@ -188,10 +208,10 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
     layoutItem: DashboardLayoutItem,
     evt: PointerEvent) {
     if (targetGrid !== this._getLayoutManager()) {
-      this.setState({ children: this.state.children.filter((child) => child !== this._draggedGridItem!) });
+      this.setState({ children: this.state.children.filter((child) => child !== this._draggingGridItem!) });
     }
 
-    this._draggedGridItem = null;
+    this._draggingGridItem = null;
   }
 
   // public onDragStop() {
@@ -211,7 +231,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
   // Handle dragging an item from the same grid over another item from the same grid
   private _onDragOverItem(key: string) {
     const children = [...this.state.children];
-    const draggedIdx = children.findIndex((child) => child === this._draggedGridItem);
+    const draggedIdx = children.findIndex((child) => child === this._draggingGridItem);
     const draggedOverIdx = children.findIndex((child) => child.state.key === key);
 
     if (draggedIdx === -1 || draggedOverIdx === -1) {
@@ -219,7 +239,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
     }
 
     children.splice(draggedIdx, 1);
-    children.splice(draggedOverIdx, 0, this._draggedGridItem!);
+    children.splice(draggedOverIdx, 0, this._draggingGridItem!);
 
     this.setState({ children });
   }
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
index 4f98fc219d5..098e925f18e 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
@@ -572,20 +572,22 @@ export class DefaultGridLayoutManager
   }
 
   public onDragStart(sourceGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem) {
-    if (layoutItem instanceof DashboardGridItem) {
-      this._draggingGridItem = sourceGrid === this ? layoutItem : layoutItem.clone();
+    if (sourceGrid === this) {
+      this._draggingGridItem = layoutItem;
     } else {
-      const width = layoutItem instanceof DashboardGridItem ? layoutItem.state.width : NEW_PANEL_WIDTH;
-      const height = layoutItem instanceof DashboardGridItem ? layoutItem.state.height : NEW_PANEL_HEIGHT;
-
-      this._draggingGridItem = new DashboardGridItem({
-        width: width ?? NEW_PANEL_WIDTH,
-        height: height ?? NEW_PANEL_HEIGHT,
-        body: layoutItem.getElementBody().clone(),
-      });
+      if (layoutItem instanceof DashboardGridItem) {
+        this._draggingGridItem = layoutItem.clone();
+      } else if (layoutItem instanceof AutoGridItem) {
+        this._draggingGridItem = new DashboardGridItem({
+          width: NEW_PANEL_WIDTH,
+          height: NEW_PANEL_HEIGHT,
+          body: layoutItem.state.body.clone(),
+          variableName: layoutItem.state.variableName,
+        });
+      }
     }
 
-    this.state.grid.setPlaceholder(this._draggingGridItem);
+    this.state.grid.setPlaceholder(this._draggingGridItem!);
   }
 
   public onDragStop(sourceGrid: DashboardLayoutGrid, targetGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem) {