diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx index 3f9b2d95ae3..c886728429b 100644 --- a/public/app/features/canvas/runtime/element.tsx +++ b/public/app/features/canvas/runtime/element.tsx @@ -81,7 +81,10 @@ export class ElementState implements LayerElement { const { vertical, horizontal } = constraint ?? {}; const placement = this.options.placement ?? ({} as Placement); + const editingEnabled = this.getScene()?.isEditingEnabled; + const style: React.CSSProperties = { + cursor: editingEnabled ? 'grab' : 'auto', position: 'absolute', // Minimum element size is 10x10 minWidth: '10px', diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx index 19f4dfa0b0b..b7ea2502521 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -415,6 +415,11 @@ export class Scene { ?.getSelectedTargets() .includes(selectedTarget.parentElement.parentElement); + // Apply grabbing cursor while dragging, applyLayoutStylesToDiv() resets it to grab when done + if (this.isEditingEnabled && isTargetMoveableElement && this.selecto?.getSelectedTargets().length) { + this.selecto.getSelectedTargets()[0].style.cursor = 'grabbing'; + } + if (isTargetMoveableElement || isTargetAlreadySelected) { // Prevent drawing selection box when selected target is a moveable element or already selected event.stop();