From 9dd70e13cd49639549645f23b1b5ef63a36d84cc Mon Sep 17 00:00:00 2001 From: Adam Wagner Date: Wed, 17 May 2017 07:47:59 +0300 Subject: Make it possible for grid drop target to accept dragged data when grid is empty (#9332) * Make it possible for grid drop target to accept dragged data when grid is empty (#9068) * Make return type of getDropTargetRow() optional --- documentation/advanced/advanced-dragndrop.asciidoc | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'documentation') 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 items = (List) 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. -- cgit v1.2.3