Make it possible to set a Resource as drag image (#9088)

Fixes #8892

Note that IE and Edge are not covered by this change - see #8977

client/src/main/java/com/vaadin/client/extensions/DragSourceExtensionConnector.java

@@ -18,9 +18,11 @@ package com.vaadin.client.extensions;
 import com.google.gwt.dom.client.DataTransfer;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.ComponentConnector;
 import com.vaadin.client.ServerConnector;
+import com.vaadin.client.annotations.OnStateChange;
 import com.vaadin.event.dnd.DragSourceExtension;
 import com.vaadin.shared.ui.Connect;
 import com.vaadin.shared.ui.dnd.DragSourceRpc;
@@ -118,6 +120,15 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector {
         removeDragListeners(dragSource);
     }
 
+    @OnStateChange("resources")
+    private void prefetchDragImage() {
+        String dragImageUrl = getResourceUrl(
+                DragSourceState.RESOURCE_DRAG_IMAGE);
+        if (dragImageUrl != null && !dragImageUrl.isEmpty()) {
+            Image.prefetch(getConnection().translateVaadinUri(dragImageUrl));
+        }
+    }
+
     /**
      * Event handler for the {@code dragstart} event. Called when {@code
      * dragstart} event occurs.
@@ -135,6 +146,9 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector {
                     getState().effectAllowed.getValue());
         }
 
+        // Set drag image
+        setDragImage(event);
+
         // Set text data parameter
         nativeEvent.getDataTransfer().setData(DragSourceState.DATA_TYPE_TEXT,
                 createDataTransferText(event));
@@ -174,6 +188,22 @@ public class DragSourceExtensionConnector extends AbstractExtensionConnector {
         getRpcProxy(DragSourceRpc.class).dragStart();
     }
 
+    /**
+     * Sets the drag image to be displayed.
+     *
+     * @param dragStartEvent
+     *         The drag start event.
+     */
+    protected void setDragImage(Event dragStartEvent) {
+        String imageUrl = getResourceUrl(DragSourceState.RESOURCE_DRAG_IMAGE);
+        if (imageUrl != null && !imageUrl.isEmpty()) {
+            Image dragImage = new Image(
+                    getConnection().translateVaadinUri(imageUrl));
+            ((NativeEvent) dragStartEvent).getDataTransfer()
+                    .setDragImage(dragImage.getElement(), 0, 0);
+        }
+    }
+
     /**
      * Event handler for the {@code dragend} event. Called when {@code dragend}
      * event occurs.

server/src/main/java/com/vaadin/event/dnd/DragSourceExtension.java

@@ -18,6 +18,7 @@ package com.vaadin.event.dnd;
 import java.util.Objects;
 
 import com.vaadin.server.AbstractExtension;
+import com.vaadin.server.Resource;
 import com.vaadin.shared.Registration;
 import com.vaadin.shared.ui.dnd.DragSourceRpc;
 import com.vaadin.shared.ui.dnd.DragSourceState;
@@ -220,6 +221,16 @@ public class DragSourceExtension<T extends AbstractComponent> extends
                 listener, DragEndListener.DRAGEND_METHOD);
     }
 
+    /**
+     * Set a custom drag image for the current drag source.
+     *
+     * @param imageResource
+     *         Resource of the image to be displayed as drag image.
+     */
+    public void setDragImage(Resource imageResource) {
+        setResource(DragSourceState.RESOURCE_DRAG_IMAGE, imageResource);
+    }
+
     @Override
     protected DragSourceState getState() {
         return (DragSourceState) super.getState();

shared/src/main/java/com/vaadin/shared/ui/dnd/DragSourceState.java

@@ -40,6 +40,8 @@ public class DragSourceState extends SharedState {
      */
     public static final String DATA_TYPE_TEXT = "text";
 
+    public static final String RESOURCE_DRAG_IMAGE = "drag-image";
+
     /**
      * {@code DataTransfer.effectAllowed} parameter for the drag event.
      */