Initial documentation for 8.1 Drag and Drop (#8867)

* Initial documentation for 8.1 Drag and Drop

Part of #8395

1 files changed, 61 insertions, 0 deletions

diff --git a/server/src/test/java/com/vaadin/tests/event/dnd/DragAndDropBookExamples.java b/server/src/test/java/com/vaadin/tests/event/dnd/DragAndDropBookExamples.java
new file mode 100644
index 0000000000..0c88ff717e
--- /dev/null
+++ b/server/src/test/java/com/vaadin/tests/event/dnd/DragAndDropBookExamples.java
@@ -0,0 +1,61 @@
+package com.vaadin.tests.event.dnd;
+
+import java.util.Optional;
+
+import com.vaadin.event.dnd.DragSourceExtension;
+import com.vaadin.event.dnd.DropTargetExtension;
+import com.vaadin.shared.ui.dnd.DropEffect;
+import com.vaadin.shared.ui.dnd.EffectAllowed;
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.themes.ValoTheme;
+
+public class DragAndDropBookExamples {
+
+    public void dragSourceExtensionSamples() {
+        Label draggableLabel = new Label("You can grab and drag me");
+        DragSourceExtension<Label> dragSource = new DragSourceExtension<>(
+                draggableLabel);
+
+        // set the allowed effect
+        dragSource.setEffectAllowed(EffectAllowed.MOVE);
+        // set the data to transfer
+        dragSource.setTransferData("text/plain", "hello receiver");
+        dragSource.addDragStartListener(
+                event -> event.getComponent().addStyleName("dragged"));
+        dragSource.addDragEndListener(
+                event -> event.getComponent().removeStyleName("dragged"));
+    }
+
+    public void dropTargetExtensionSamples() {
+        VerticalLayout dropTargetLayout = new VerticalLayout();
+        dropTargetLayout.setCaption("Drop things inside me");
+        dropTargetLayout.addStyleName(ValoTheme.LAYOUT_CARD);
+
+        // make the layout accept drops
+        DropTargetExtension<VerticalLayout> dropTarget = new DropTargetExtension<>(
+                dropTargetLayout);
+
+        // set the effect that is allowed, must match what is in the drag source
+        dropTarget.setDropEffect(DropEffect.MOVE);
+
+        // catch the drops
+        dropTarget.addDropListener(event -> {
+            // if the drag source is in the same UI as the target
+            Optional<AbstractComponent> dragSource = event
+                    .getDragSourceComponent();
+            if (dragSource.isPresent() && dragSource.get() instanceof Label) {
+                // move the label to the layout
+                dropTargetLayout.addComponent(dragSource.get());
+
+                // get possible transfer data
+                // NOTE that "text" is same as "text/plain" from drag source
+                // data
+                String message = event.getTransferData("text");
+                Notification.show("DropEvent with data transfer: " + message);
+            }
+        });
+    }
+}