diff options
| -rw-r--r-- | documentation/advanced/advanced-dragndrop.asciidoc | 20 |
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"))) |