Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: document DragSource#setDragImage #3761

Draft
wants to merge 1 commit into
base: next
Choose a base branch
from
Draft

docs: document DragSource#setDragImage #3761

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion articles/flow/create-ui/dnd/drag-source.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,30 @@ public class DraggableRouteItem extends RouteItem implements DragSource<RouteIte
----

Changing the draggable element also changes the drag image that the browser shows under the cursor.
HTML 5 has an API for setting a custom drag image element, but it isn't yet available from the server-side API, because it works unreliably in some browsers (Edge / Safari).

=== Drag Image

It's possible to customize the drag image that the browser shows under the cursor when dragging a component by using [interfacename]`DragSource` interface's [methodname]`setDragImage` methods.

Image is applied automatically in the next drag start event in the browser.
<<../../application/resources#the-image-component, [classname]`Image`>> component is fully supported as a drag image. Other components can be used as well, but the support may vary between browsers. If given component is visible element in the viewport, browser can show it as a drag image.

[source,java]
----
// continuing from the previous example
CardComponent card = new CardComponent();

card.setDragImage(new Image("/cards/ace_of_spades.png", "Ace of Spades"));
----

[classname]`Image` component supports <<../../advanced/dynamic-content#using-streamresource, StreamResource>> to generate the image dynamically.

Optional coordinates define the offset of the pointer location from the top left corner of the image. Following example sets x offset to 20 pixels and y offset to 0 pixels.
[source,java]
----
card.setDragImage(new Image("/cards/queen_of_hearts.png", "Queen of Hearts"), 20, 0)
----

More information about the drag image from link:https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage[HTML5 drag and drop API].

[discussion-id]`4FFD51BA-4736-44BD-8FCF-0E534A19FB8D`
Loading