Support for invisible/detached components for setDragImage

[mshabarov]

Describe your motivation

The recently added Drag Image support is limited to cases, when the component is a visible element in the viewport. The component does not appear during drag, if it's just a detached component:

Div dragBox = new Div("Drag box");
DragSource<Div> dragSource = DragSource.configure(dragBox);
dragSource.setDraggable(true);
dragSource.setDragImage(new Div("Drag Source Image"));
add(dragBox);

see this comment.

setDragImage browser's API states that the element should be visible or added to a DOM, see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement.

Describe the solution you'd like

With adding a component to a DOM and offset it like this (just an example), makes it shown as drag image.

add(dragSourceImage);
dragSourceImage.getStyle().set("position", "absolute");
dragSourceImage.getStyle().set("top", "-100px");
dragSourceImage.getStyle().set("left", "-100px");

Vaadin Flow's DnD can integrate some logic that add/hides the component on a page to make the API work.
A bit of hacky solution, There is no other way currently to make it work.

Describe alternatives you've considered

Document possible workarounds that can be applied in projects, but IMO that's a wrong way.

Additional contex

Vaadin 24.6 pre-release.