Apply CSS style on file drag over

Flow
1

Hi all, I have this Layout that I am applying FileDropTarget to so I could drag a file from my desktop in it to upload. I need to increase the opacity of the layout whenever a file a drag over it from my desktop, is this possible to do? if so, how?

Thank you

2

Hello,

From https://vaadin.com/docs/v8/framework/advanced/advanced-dragndrop.html:

When dragging data over a drop target and the drag over criteria passes, a style name is applied to indicate that the element accepts the drop. This style name is the primary style name with -drag-center suffix, e.g. v-label-drag-center.

So, in your (S)CSS you could do something like this:

[class*="-drag-center"]
 {
  background: purple;
}