Add mobile html5 dnd support using polyfill (#9282)

First step of mobile DND support.

- Add mobile html5 dnd support using polyfill
- Adds a switch for enabling mobile html5 dnd support
- Adds polyfill only when needed
- Ignore native Android Chrome drag start because doesn't work properly
(no dragend event fired)
- Add documentation on enabling mobile HTML5 DnD support
- Add mention of drag-drop-polyfill license
- Fixed issue in polyfill when not using "snapback"
- Add mention of forked polyfill

Fixes #9174

2 files changed, 43 insertions, 9 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
index 529d8cf562..059c963658 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java
@@ -51,6 +51,7 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
 
     @Override
     protected void setup(VaadinRequest request) {
+        getUI().setMobileHtml5DndEnabled(true);
 
         // Drag source Grid
         Grid<Person> left = createGridAndFillWithData(50);
@@ -117,18 +118,22 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
         });
 
         // Add drag start listener
-        dragSource.addGridDragStartListener(
-                event -> draggedItems = event.getDraggedItems());
+        dragSource.addGridDragStartListener(event -> {
+            draggedItems = event.getDraggedItems();
+            log("START: " + draggedItems.size() + ", :"
+                    + draggedItems.stream().map(person -> person.getLastName())
+                            .collect(Collectors.joining(" ")));
+        });
 
         // Add drag end listener
         dragSource.addGridDragEndListener(event -> {
+            log("END: dropEffect=" + event.getDropEffect());
             if (event.getDropEffect() == DropEffect.MOVE
                     && draggedItems != null) {
                 // If drop is successful, remove dragged item from source Grid
                 ((ListDataProvider<Person>) grid.getDataProvider()).getItems()
                         .removeAll(draggedItems);
                 grid.getDataProvider().refreshAll();
-
                 // Remove reference to dragged items
                 draggedItems = null;
             }
@@ -160,7 +165,8 @@ public class GridDragAndDrop extends AbstractTestUIWithLog {
                     items.addAll(index, draggedItems);
                     dataProvider.refreshAll();
 
-                    log("dragData=" + event.getDataTransferText() + ", target="
+                    log("DROP: dragData=" + event.getDataTransferText()
+                            + ", target="
                             + event.getDropTargetRow().getFirstName() + " "
                             + event.getDropTargetRow().getLastName()
                             + ", location=" + event.getDropLocation());
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 8a136304aa..8f72fe225e 100644
--- a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
+++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java
@@ -27,6 +27,7 @@ import com.vaadin.server.VaadinRequest;
 import com.vaadin.shared.ui.dnd.DropEffect;
 import com.vaadin.shared.ui.dnd.EffectAllowed;
 import com.vaadin.tests.components.AbstractTestUIWithLog;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.NativeSelect;
@@ -42,7 +43,7 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
     private final Label king = new Label("K");
 
     // Create desk
-    private final HorizontalLayout desk = new HorizontalLayout();
+    private HorizontalLayout desk = new HorizontalLayout();
 
     private final List<DragSourceExtension<Label>> sources = new ArrayList<>();
     private final List<DropTargetExtension<Label>> targets = new ArrayList<>();
@@ -62,10 +63,28 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
         dropEffect.setItems(DropEffect.values());
         dropEffect.addValueChangeListener(event -> targets
                 .forEach(target -> target.setDropEffect(event.getValue())));
+        CheckBox enableMobileSupport = new CheckBox("Mobile Support", false);
+        enableMobileSupport.addValueChangeListener(event -> {
+            setMobileHtml5DndEnabled(event.getValue());
+
+            removeExtensions();
+            setupExtensions();
+        });
+
+        setupExtensions();
 
-        // Create UI and add extensions
         desk.addComponents(ace, jack, queen, king);
 
+        addComponents(new HorizontalLayout(effectAllowed, dropEffect,
+                enableMobileSupport), desk);
+
+        // Add styling
+        setStyle();
+    }
+
+    private void setupExtensions() {
+        // Create UI and add extensions
+
         ace.setStyleName("card");
         addDragSourceExtension(ace);
         addDropTargetExtension(ace);
@@ -81,11 +100,20 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog {
         king.setStyleName("card");
         addDragSourceExtension(king);
         addDropTargetExtension(king);
+    }
 
-        addComponents(new HorizontalLayout(effectAllowed, dropEffect), desk);
+    private void removeExtensions() {
+        ace.removeExtension(ace.getExtensions().iterator().next());
+        ace.removeExtension(ace.getExtensions().iterator().next());
 
-        // Add styling
-        setStyle();
+        jack.removeExtension(jack.getExtensions().iterator().next());
+        jack.removeExtension(jack.getExtensions().iterator().next());
+
+        queen.removeExtension(queen.getExtensions().iterator().next());
+        queen.removeExtension(queen.getExtensions().iterator().next());
+
+        king.removeExtension(king.getExtensions().iterator().next());
+        king.removeExtension(king.getExtensions().iterator().next());
     }
 
     private void addDragSourceExtension(Label source) {