Mention the applied CSS styles in the documentation (#9219)

1 files changed, 19 insertions, 1 deletions

diff --git a/documentation/advanced/advanced-dragndrop.asciidoc b/documentation/advanced/advanced-dragndrop.asciidoc
index 8516e9be6f..804224d317 100644
--- a/documentation/advanced/advanced-dragndrop.asciidoc
+++ b/documentation/advanced/advanced-dragndrop.asciidoc
@@ -82,6 +82,11 @@ user-select: none;
 ----
 ====
 
+=== CSS Style Rules
+
+The drag source element, additional to it's primary style name, have a style name with the `-dragsource` suffix. For example, a Label component would have the style name `v-label-dragsource` when the drag source extension is applied to it.
+Additionally, the elements also have the `v-draggable` style name that is independent of the component's primary style.
+
 [[advanced.dragndrop.drophandler]]
 == Drop Target
 
@@ -129,11 +134,15 @@ The __drag over criteria__ allows you determine whether the current drag source
 
 The __drop criteria__ is similar to __drag over criteria__, but it is executed when the user has dropped the data by releasing the mouse button. The script gets the `drop` event as a parameter named `event`. Returning `false` will prevent the drop and no drop event is fired on the server side.
 
+=== CSS Style Rules
+
+When dragging data over a drop target and the drag over criteria passes, a style name is applied to indicate that the element accepts drops. This style name is the primary style name with `-drag-center` suffix, e.g. `v-label-drag-center`.
+
 ////
 TODO Add an example of drag over criteria and drop criteria
 ////
 
-=== 
+===
 
 ////
 TODO add back when supported with new API ?
@@ -222,6 +231,10 @@ dragSource.addGridDragEndListener(event -> {
 
 The dragged rows can be accessed from both events using the `getDraggedItems()` method.
 
+==== CSS Style Rules
+
+A drag source Grid's rows have the `v-grid-row-dragsource` and the `v-draggable` style names applied to indicate that the rows are draggable.
+
 === Grid as a Drop Target
 
 To make a Grid component's rows accept a drop event, apply the [classname]#GridDropTarget# extension to the component. When creating the extension, you need to specify where the transferred data can be dropped on.
@@ -264,6 +277,11 @@ dropTarget.addGridDropListener(event -> {
 });
 ----
 
+==== CSS Style Rules
+
+When dragging data over a drop target Grid's row, depending on the drop mode and the mouse position relative to the row, a style name is applied to the row to indicate the drop location.
+`v-grid-row-drag-center` indicates ON_TOP, `v-grid-row-drag-top` indicates ABOVE and `v-grid-row-drag-bottom` indicates BELOW locations.
+
 (((range="endofrange", startref="term.advanced.dragndrop")))