Drag image is rendered off-screen

[MetRonnie]

Description

Since 2.0.0, the "image" that moves with your mouse when you drag & drop is rendered off-screen instead of under your cursor.

Reproduce

1. Create a DockPanel with a widget in it
2. Drag the widget tab around

Expected behavior

An image of the widget's tab moves around with your cursor.

Context

• Operating System and version: Windows 10
• Browser and version: Chrome 114.0.5735.110
• JupyterLab version: N/A
• @lumino version: 2.0.0

I think this was introduced in #502 which replaced

lumino/packages/dragdrop/src/index.ts

Lines 234 to 235 in 578b0a3

	style.top = `${clientY}px`;
	style.left = `${clientX}px`;

with

lumino/packages/dragdrop/src/index.ts

Line 234 in 6006057

style.transform = `translate(${clientX}px, ${clientY}px)`;

and now it seems the fixed-position offset is incorrect. Setting

top: 0;
left: 0;

sort of fixes it but the top left of the image is anchored to the cursor rather than where you dragged from.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

Thanks for reporting!

I guess that setting transform-origin is the way to fix this.

cc @krassowski for input

@MetRonnie would you be willing to open a PR?

[MetRonnie]

PR up at #595