HTML5 Drag and Drop Support (#8264)

* Add DragSource Extension (#8169)

* Add DropTarget Extension (#8170)

* Add DragStart Event to DragSource Extension (#8171)

* Make DataTransfer.dropEffect configurable (#8174)

* Make DragSource.dataTransfer data configurable (#8172)

* Add server-side Event for drop (#8177)

* Added license headers

* Extract handler methods, move DropEvent and DropListener to new file, move enums to top

* Replaced LinkedHashMap with Map and added List to preserve order of data

* Add API for adding a JS acceptance criteria for dragover and drop (#8178, #8179)

* Make DragSource Extension extendable (#8175)

* Make DropTarget Extension extendable (#8176)

* Added javadoc to protected methods

* Moved EffectAllowed to shared so that it could be used in shared state directly

* Moved DropEffect to separate file, some review fixes and javadoc

* Added list to DropTargetRpc to preserve order of data

* Remove event listeners on unregister

* Changed method names set/getData() to more descriptive set/getTransferData()

* Add server side dragStart event (#8171)

* Add style to prevent text selection to allow drag

* Remove target indicator style on drop

* Add client side dragend event listener for drag source

* Add server side dragend listener.
Attach client side listener only when server side listener added.

* Add drag source information to server side dragstart and dragend events.

* Fixed some issues addressed in review

* Trigger server side dragstart only when there is a listener attached

* Criteria script can be set as null to clear

* Use Js Interop instead of JSNI for handling event listeners

* Use elemental package instead of Js Interop for handling event listeners

* Add missing javadoc for public methods

* Add default value "uninitialized" to effectAllowed parameter

* Simple test UI for HTML5 DnD functionality (#8395)

* Add javadoc and other minor changes

1 files changed, 153 insertions, 0 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
new file mode 100644
index 0000000000..24c3940737
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.dnd;
+
+import java.util.Optional;
+
+import com.vaadin.event.dnd.DragSourceExtension;
+import com.vaadin.event.dnd.DropTargetExtension;
+import com.vaadin.server.Extension;
+import com.vaadin.server.Page;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUIWithLog;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+
+public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
+
+    // Data type for storing card position
+    private static final String DATA_INDEX = "index";
+
+    // Create cards
+    private final Label ace = new Label("A");
+    private final Label jack = new Label("J");
+    private final Label queen = new Label("Q");
+    private final Label king = new Label("K");
+
+    // Create desk
+    private final HorizontalLayout desk = new HorizontalLayout();
+
+    @Override
+    protected void setup(VaadinRequest request) {
+
+        // Create UI and add extensions
+        desk.addComponents(ace, jack, queen, king);
+
+        ace.setStyleName("card");
+        addDragSourceExtension(ace);
+        addDropTargetExtension(ace);
+
+        jack.setStyleName("card");
+        addDragSourceExtension(jack);
+        addDropTargetExtension(jack);
+
+        queen.setStyleName("card");
+        addDragSourceExtension(queen);
+        addDropTargetExtension(queen);
+
+        king.setStyleName("card");
+        addDragSourceExtension(king);
+        addDropTargetExtension(king);
+
+        addComponent(desk);
+
+        // Add styling
+        setStyle();
+    }
+
+    private void addDragSourceExtension(Label source) {
+        // Create and attach extension
+        DragSourceExtension dragSource = new DragSourceExtension();
+        dragSource.extend(source);
+
+        // Set component position as transfer data
+        dragSource.setTransferData(DATA_INDEX,
+                String.valueOf(desk.getComponentIndex(source)));
+
+        // Add listeners
+        dragSource.addDragStartListener(event -> {
+            event.getComponent().addStyleName("dragged");
+            log(((Label) event.getComponent()).getValue() + " dragstart");
+        });
+
+        dragSource.addDragEndListener(event -> {
+            event.getComponent().removeStyleName("dragged");
+            log(((Label) event.getComponent()).getValue() + " dragend");
+        });
+    }
+
+    private void addDropTargetExtension(Label target) {
+        // Create and attach extension
+        DropTargetExtension dropTarget = new DropTargetExtension();
+        dropTarget.extend(target);
+
+        // Add listener
+        dropTarget.addDropListener(event -> {
+            // Retrieve the source's position
+            int sourceIndex = Integer
+                    .valueOf(event.getTransferData(DATA_INDEX));
+
+            // Find source component
+            Component source = desk.getComponent(sourceIndex);
+
+            // Swap source and target components
+            desk.replaceComponent(target, source);
+
+            // Get DragSource extension for target component and set position data
+            Optional<Extension> targetExt = target.getExtensions().stream()
+                    .filter(e -> e instanceof DragSourceExtension).findFirst();
+            targetExt.ifPresent(extension -> {
+                ((DragSourceExtension) extension).setTransferData(DATA_INDEX,
+                        String.valueOf(desk.getComponentIndex(target)));
+            });
+
+            // Get DragSource extension for source component and set position data
+            Optional<Extension> sourceExt = source.getExtensions().stream()
+                    .filter(e -> e instanceof DragSourceExtension).findFirst();
+            sourceExt.ifPresent(extension -> {
+                ((DragSourceExtension) extension).setTransferData(DATA_INDEX,
+                        String.valueOf(desk.getComponentIndex(source)));
+            });
+
+            log(((Label) source).getValue() + " dropped onto " + ((Label) event
+                    .getComponent()).getValue());
+        });
+    }
+
+    private void setStyle() {
+        Page.Styles styles = Page.getCurrent().getStyles();
+
+        styles.add(".card {"
+                + "width: 150px;"
+                + "height: 200px;"
+                + "border: 1px solid black;"
+                + "border-radius: 7px;"
+                + "padding-left: 10px;"
+                + "color: red;"
+                + "font-weight: bolder;"
+                + "font-size: 25px;"
+                + "background-color: gainsboro;"
+                + "}");
+        styles.add(".v-drag-over {border-style: dashed;}");
+        styles.add(".dragged {opacity: .4;}");
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Shuffle cards with pure HTML5 drag and drop";
+    }
+}