diff options
3 files changed, 24 insertions, 6 deletions
diff --git a/client/src/main/java/com/vaadin/client/extensions/DragSourceExtensionConnector.java b/client/src/main/java/com/vaadin/client/extensions/DragSourceExtensionConnector.java index 5c91e91714..75e89f9ca4 100644 --- a/client/src/main/java/com/vaadin/client/extensions/DragSourceExtensionConnector.java +++ b/client/src/main/java/com/vaadin/client/extensions/DragSourceExtensionConnector.java @@ -55,6 +55,11 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector { */ protected static final String STYLE_SUFFIX_DRAGSOURCE = "-dragsource"; + /** + * Style suffix for indicating that the element is being dragged. + */ + protected static final String STYLE_SUFFIX_DRAGGED= "-dragged"; + private static final String STYLE_NAME_DRAGGABLE = "v-draggable"; // Create event listeners @@ -205,6 +210,11 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector { dataMap.get(DragSourceState.DATA_TYPE_TEXT)); } + // Set style to indicate the element being dragged + Element dragSource = getDraggableElement(); + dragSource.addClassName( + getStylePrimaryName(dragSource) + STYLE_SUFFIX_DRAGGED); + // Initiate firing server side dragstart event when there is a // DragStartListener attached on the server side if (hasEventListener(DragSourceState.EVENT_DRAGSTART)) { @@ -363,6 +373,12 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector { event.stopPropagation(); return; } + + // Remove dragged element indicator style + Element dragSource = getDraggableElement(); + dragSource.removeClassName( + getStylePrimaryName(dragSource) + STYLE_SUFFIX_DRAGGED); + // Initiate server start dragend event when there is a DragEndListener // attached on the server side if (hasEventListener(DragSourceState.EVENT_DRAGEND)) { diff --git a/documentation/advanced/advanced-dragndrop.asciidoc b/documentation/advanced/advanced-dragndrop.asciidoc index dcc0022a2f..f9e21fbb5c 100644 --- a/documentation/advanced/advanced-dragndrop.asciidoc +++ b/documentation/advanced/advanced-dragndrop.asciidoc @@ -53,13 +53,13 @@ The [classname]#DragStartEvent# is fired when the drag has started, and the [cla [source, java] ---- dragSource.addDragStartListener(event -> - event.getComponent().addStyleName("dragged") + Notification.show("Drag event started"); ); dragSource.addDragEndListener(event -> { - event.getComponent().removeStyleName("dragged") - if (event.isCanceled()) { Notification.show("Drag event was canceled"); + } else { + Notification.show("Drag event finished"); } }); ---- @@ -83,6 +83,10 @@ dragSource.addDragEndListener(event -> 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. +While being dragged, the element also gets the style name with suffix `-dragged`. +An example for this is `v-label-dragged` in case of a Label component. +This style name is added during the drag start and removed during the drag end event. + The browsers allow the user to select and drag and drop text, which could cause issues with components that have text. The Framework tries to prevent this by automatically adding the following style to all `v-draggable` elements. It is included by the sass mixin `valo-drag-element`. [source, css] diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java index d842907c45..bf37cf0e82 100644 --- a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java +++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java @@ -123,13 +123,11 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { // Add listeners dragSource.addDragStartListener(event -> { - event.getComponent().addStyleName("dragged"); log(event.getComponent().getValue() + " dragstart, effectsAllowed=" + event.getEffectAllowed()); }); dragSource.addDragEndListener(event -> { - event.getComponent().removeStyleName("dragged"); log(event.getComponent().getValue() + " dragend, dropEffect=" + event.getDropEffect()); }); @@ -172,7 +170,7 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { + "padding-left: 10px;" + "color: red;" + "font-weight: bolder;" + "font-size: 25px;" + "background-color: gainsboro;" + "}"); styles.add(".v-label-drag-center {border-style: dashed;}"); - styles.add(".dragged {opacity: .4;}"); + styles.add(".v-label-dragged {opacity: .4;}"); } @Override |