Drag Image Click Anchor

[kcvikander]

When using the built in drag and drop functionality by setting isDraggable to true, the dragImage is automatically anchored to the center of the drag image.

This update adds a new prop, dragImageAnchor to allow changing where the cursor is anchored to on the drag image.

[Copilot]

Pull Request Overview

This PR introduces a new dragImageAnchor prop to control where the cursor attaches to the drag preview when isDraggable is enabled. It adds the prop to the public API, wires it through all relevant grid components, implements the offset logic in the drag start handler, and provides a Storybook example.

• Define dragImageAnchor in DataGridProps with default "center".
• Compute custom anchor offsets (dragAnchorX/Y) in the drag-start handler.
• Drill the prop through DataGrid, DataGridSearch, DataGridDnd, ScrollingDataGrid, and DataEditor, plus a new story.

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx	Drill dragImageAnchor into GridScroller
packages/core/src/internal/data-grid/data-grid.tsx	Add dragImageAnchor prop, default value, and compute offsets in drag start
packages/core/src/internal/data-grid-search/data-grid-search.tsx	Pass dragImageAnchor to search-enabled grid
packages/core/src/internal/data-grid-dnd/data-grid-dnd.tsx	Pass dragImageAnchor to DnD-enabled grid
packages/core/src/data-editor/stories/data-editor.stories.tsx	New DraggableWithEventAnchor story
packages/core/src/data-editor/data-editor.tsx	Drill dragImageAnchor through DataEditor impl

Comments suppressed due to low confidence (2)

packages/core/src/internal/data-grid/data-grid.tsx:1577

• Consider adding unit or integration tests to verify each of the dragImageAnchor modes ("center", "click", "click-x", "click-y") and ensure the computed anchor offsets behave as expected.

const dragAnchorX = ['click', 'click-x'].includes(dragImageAnchor) ? event.clientX - boundsForDragTarget.x : boundsForDragTarget.width / 2

packages/core/src/internal/data-grid/data-grid.tsx:193

• [nitpick] The indentation of the JSDoc block for dragImageAnchor doesn’t match surrounding props; aligning it with the rest of DataGridProps will keep the style consistent.

    /**

[Copilot]

[nitpick] The logic for computing dragAnchorX and dragAnchorY is nearly identical; extracting it into a small helper (e.g., computeDragAnchor(offset, size, mode)) could improve readability and reuse.

Suggested change

	const dragAnchorX = ['click', 'click-x'].includes(dragImageAnchor) ? event.clientX - boundsForDragTarget.x : boundsForDragTarget.width / 2
	const dragAnchorY = ['click', 'click-y'].includes(dragImageAnchor) ? event.clientY - boundsForDragTarget.y : boundsForDragTarget.height / 2
	const dragAnchorX = computeDragAnchor(event.clientX, boundsForDragTarget.width, dragImageAnchor, boundsForDragTarget.x);
	const dragAnchorY = computeDragAnchor(event.clientY, boundsForDragTarget.height, dragImageAnchor, boundsForDragTarget.y);