diff options
Diffstat (limited to 'documentation')
| -rw-r--r-- | documentation/advanced/advanced-dragndrop.asciidoc | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/documentation/advanced/advanced-dragndrop.asciidoc b/documentation/advanced/advanced-dragndrop.asciidoc index d7ef80ac33..2db6e0f18b 100644 --- a/documentation/advanced/advanced-dragndrop.asciidoc +++ b/documentation/advanced/advanced-dragndrop.asciidoc @@ -153,7 +153,9 @@ TODO Add an example of drop criteria === 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`. +Each drop target element have an applied style name, the primary style name with `-droptarget` suffix, e.g. `v-label-droptarget`, to indicate that it is a potential target for data to be dropped onto it. + +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`. //// @@ -321,8 +323,11 @@ dropTarget.addGridDropListener(event -> { List<Person> items = (List<Person>) dataProvider.getItems(); // Calculate the target row's index - int index = items.indexOf(event.getDropTargetRow()) + ( + int index = items.size(); + if (event.getDropTargetRow().isPresent()) { + index = items.indexOf(event.getDropTargetRow().get()) + ( event.getDropLocation() == DropLocation.BELOW ? 1 : 0); + } // Add dragged items to the target Grid items.addAll(index, draggedItems); @@ -337,6 +342,8 @@ dropTarget.addGridDropListener(event -> { ==== CSS Style Rules +A drop target Grid's body has the style name `v-grid-body-droptarget` to indicate that it is a potential target for data to be dropped. + 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. |