Generic Drag&Drop get ctrl, shift, alt and meta key

[probert94]

Description of the feature

I am using the generic Drag&Drop and would like to be able to change the behavior based on the pressed key modifiers. Example: In Windows, draging a file usually moves it, but if you press ctrl, it will copy the file instead. I would like to be able to do the same in Vaadin.

Note:

It seems to be enough to add @EventData("event.ctrlKey") boolean ctrlKey and so on to the constructor of DragEvent (and maybe also the other Drag&Drop related events) and store the result in a member.
For now, I created a custom DragEvent which adds the given information.

Versions:

- Vaadin / Flow version: 19.0.6

[pleku]

Hi. IIRC the behavior when presing the modifier keys is platform dependent, and those can actually control what the dropEffect will be - if the drop target allows that. So can you test that if you setup your DropTarget to have the corresponding effectAllowed and then use the modifier keys -> theDropEvent::getDropEffect should match the modifier key. Or is there some reason why you would not use this ?

From https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects

The user can modify the desired effect by pressing modifier keys. Although the exact keys used vary by platform, typically the Shift and Control keys would be used to switch between copying, moving, and linking. The mouse pointer will change to indicate which operation is desired. For instance, for a copy, the cursor might appear with a plus sign next to it.

You can modify the dropEffect property during the dragenter or dragover events, if for example, a particular drop target only supports certain operations. You can modify the dropEffect property to override the user effect, and enforce a specific drop operation to occur. Note that this effect must be one listed within the effectAllowed property. Otherwise, it will be set to an alternate value that is allowed.

[probert94]

Thank you for the quick response @pleku, I did not know about that. My usecase is a little different then the one I used as an example. In my case, I would like to be able to show some kind of options dialog when dropping while pressing the shift key. Otherwise I want to use default options. But I might be able to implement that by using the DropEffect.LINK.

[pleku]

Ok. Let us know if that works out - it is not a big deal to add the modifier keys to the dnd events' data if needed.

[probert94]

The DropEffect always seems to be null. The documentation links the related setter (setDropEffect). So the server side DropEffect does not seem to take the key modifiers into account.

[javier-godoy]

See #7500

[probert94]

I just noticed, that a few things (like the v-drag-over-target class) are linked to the DropEffect you set on the DropTarget. So solving the related Issue #7500 will probably not be that easy. So I think it wouldn't be a bad idea to add the KeyModifiers (the related flags) to the dnd events, as it won't hurt if they are not needed. It's just an additional information you can use if you want.

[firestormdong]

Hi, I'm also seeking the way to behave according to modifier keys. But what you suggested seems not working. Especially I can only set 1 drop effect (e.g. copy or move instead of copymove). How can I implement copy or move based on modifier key on the same drop target?

Hi. IIRC the behavior when presing the modifier keys is platform dependent, and those can actually control what the dropEffect will be - if the drop target allows that. So can you test that if you setup your DropTarget to have the corresponding effectAllowed and then use the modifier keys -> theDropEvent::getDropEffect should match the modifier key. Or is there some reason why you would not use this ?

From https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects

The user can modify the desired effect by pressing modifier keys. Although the exact keys used vary by platform, typically the Shift and Control keys would be used to switch between copying, moving, and linking. The mouse pointer will change to indicate which operation is desired. For instance, for a copy, the cursor might appear with a plus sign next to it.

You can modify the dropEffect property during the dragenter or dragover events, if for example, a particular drop target only supports certain operations. You can modify the dropEffect property to override the user effect, and enforce a specific drop operation to occur. Note that this effect must be one listed within the effectAllowed property. Otherwise, it will be set to an alternate value that is allowed.