fix: attach element when used in drag source

[caalador]

Attach elemnt to dom and move it
outside of the viewport to have it
visible as a drag image.
Image can be used without attaching
to dom. Hidden elements are also
not shown so throw exception
when using one as dragImage.

Fixes #20426

[github-actions]

Test Results

1 156 files  ± 0  1 156 suites  ±0   1h 35m 15s ⏱️ + 1m 40s
7 498 tests ± 0  7 445 ✅ ± 0  53 💤 ±0  0 ❌ ±0 
7 876 runs  +37  7 813 ✅ +37  63 💤 ±0  0 ❌ ±0 

Results for commit e3a4042. ± Comparison against base commit 2977de2.

♻️ This comment has been updated with latest results.

[mshabarov]

I have no strong opinion should the framework add the component by it's own or delegate this to projects. We have agreed that we just document this.
However, with this change, the Flow allows to tune how the component is attached.

Thus, I like this change - to have a default and provide an ability to customise it.

[tltv]

To ensure that appended element does not show up and does not affect DOM unless being dragged, it should probably have display: none by default and change to display: block automatically on drag start event before setting the drag element. And reset back when stopped dragging.

[caalador]

Done

[mshabarov]

This doesn't seem to work. Tested with the following example:

Div dragBox = new Div("Drag box");
DragSource<Div> dragSource = DragSource.create(dragBox);
dragSource.setDraggable(true);
Button button = new Button("Button");
dragSource.setDragImage(button);
add(dragBox);

It doesn't show anything.

Though it works once I configure it manually:

Div dragBox = new Div("Drag box");
DragSource<Div> dragSource = DragSource.create(dragBox);
dragSource.setDraggable(true);
Button button = new Button("Button");
add(button);
Element element = button.getElement();
Style style = element.getStyle();
style.set("position", "absolute");
style.set("top", "-100px");
style.set("left", "-100px");
// style.set("display", "none"); //also works even if hidden 
dragSource.setDragImage(button);
add(dragBox);

[mshabarov]

This doesn't seem to work. Tested with the following example:

Div dragBox = new Div("Drag box");
DragSource<Div> dragSource = DragSource.create(dragBox);
dragSource.setDraggable(true);
Button button = new Button("Button");
dragSource.setDragImage(button);
add(dragBox);

It doesn't show anything.

Though it works once I configure it manually:

Div dragBox = new Div("Drag box");
DragSource<Div> dragSource = DragSource.create(dragBox);
dragSource.setDraggable(true);
Button button = new Button("Button");
add(button);
Element element = button.getElement();
Style style = element.getStyle();
style.set("position", "absolute");
style.set("top", "-100px");
style.set("left", "-100px");
// style.set("display", "none"); //also works even if hidden 
dragSource.setDragImage(button);
add(dragBox);

[sonarcloud]

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mshabarov]

Added a workaround to docs, while this is being investigated. vaadin/docs#3936

[mshabarov]

I tried doing the same trick using a plain JavaScript and it works as expected for me, the styles are similar and the drag image component is a child of drag source component. I'll go checking what's wrong in Flow because a browser is likely out of the loop here.

[mshabarov]

It was my fault, I had

.v-dragged {
  opacity: 0;
}

leftover css in my test project that ofc made things worse.