Drag And Drop Contents To Non GWT IFrame from TreeGrid

[Martin00001]

Hi,

I am trying to find a solution to enable drag and drop from a GWT TreeGrid to a non GWT pure HTML and JS IFrame. As a short test I made a HTML Portlet showing a simple HTML Dropzone (https://www.sitepoint.com/html5-file-drag-and-drop/). When I drag a record from the TreeGrid to the DropZone no event is triggered on the IFRAME side.

Is there a way to support such a behaviour? What configurations do I have to make to my TreeGrid to Enable such kind of Drag and Drop? If it can work, how does the Object look like, which will be dropped on the IFrame side?

Thank you
Martin

[Isomorphic]

You need to use a native (HTML5) drag to get drop events in another frame or window. See canvas.useNativeDrag and the linked sample.

[Martin00001]

Hi,

Thanks for your response.

I tried to adop the Native Drag and Drop Create Example to Drag a canvas to a non GWT Div. In my test window I copied the DragPiece Code from the sample and added a HtmlPane with a test iframe. In order to test the iframe functionality I added a sample image. When I drop the sample w3c image to the div the JavaScript drop function gets triggered and everythin works. When I drop the cubes to the div nothing happens. Do you have any idea why this is not working?

I tried setting the z-index of the dropzone div to a higher value then the the z-index of the cubes, but it had no effect.

My GWT and html code look as follows.

Test Window

/**
 * 
 */
package at.invaris.ta.client.gwt.panel.dragdrop;

import java.util.HashMap;
import java.util.Map;

import at.invaris.commons.gwt.window.GwtWindow;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ContentsType;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLPane;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.events.DragStartEvent;
import com.smartgwt.client.widgets.events.DragStartHandler;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VLayout;

public class TADragDropTestPanel extends GwtWindow {

    private final VLayout vLayout = new VLayout();

    private final HTMLPane html5Pane;

    public static final Map<String, String> DRAG_TRACKER_IMAGE_URLS = new HashMap<String, String>();
    static {
        DRAG_TRACKER_IMAGE_URLS
                .put("b",
                        "data:image/png;base64,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");
        DRAG_TRACKER_IMAGE_URLS
                .put("y",
                        "data:image/png;base64,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");
        DRAG_TRACKER_IMAGE_URLS
                .put("g",
                        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEU0lEQVRo3tWawW4bNxCGv1kzie2cWhhI02N7LNB3q9vHaJI3zCloHMBIT3ZkR+Lfw1Ly7ooczio9tAQEaXdJLmf4z/zDGcH/vNnRnXcYqjzbX6n8Xn4zec7k2XIONZ7VVjSfa7y6no+cL/ItA2LAOAOG8om3mlCqqKklfK3P2HL57IDMNflYgDcMQALOgZflO60Swhaa62k2NjYDW4wN4g7YYGz3QozD/sSK1i+BK+A14gq4LPetoZljbfcWFdP4/lqIHcY94hb4CNyW6x1/oDR5wVnR/GvgF+An4HvE8yMBVMF1a1HL33IE0dG1gEfEZ+B9EeoL4qHAiXSYTgwFNlfAz8CvwA/AC4zhyDitIgwNwaxyTyHjzsADxg3CMD4h/iqwNpjvgAEJ4xLxHcYrxI8YF6gIYGVKz2BrLTswwbWNDGzIgPEB8RJ4NrXLtNDDgEjAc8Q5cIG4OAxovVAND9OClQJGPRf9BeJZgblNx6fqJHaA1HCyO2UFH7R8/3g9XYMt+6WqBrLjzxX0JnLuyzHsKVR7a6gKoIqx1RYlZwdywy7kuE0cwZz3pi6Depi2DlwiBq4gQTbeM8y0rMUW54oXmfZf3s8NbebK2NbiVVGCGu+vGnFuaF4d16cKfCLExsq+VQj1MNnaxh4UFIRaBC7Ws4GeFtXBsTX6TsnPHC/X4oncdK+OG127xVEjVYcE185X9UKnbGnLW3kkFiG2wNjU3LpeXINj6C3+sM5u50CfLhOvDZVP9SZrwhBHqWlVEOaFFQq8NArTiMDyvFBNy14oUQsdFAgxrOH11GH1pgC2wiv0YqOIVuVGoe3gDy+Y8yDSihaj3EDgOFlzDA4sU8gw1SCzHDzbRhmbhnLUPgydRmQRz+JxQiQkCaZekhu3WEeQXrjtzdNLDFjMO6buAaSXPSNorL1g0Ts/dCHU8yLq0L6Cu7OWyALQHFytLn97h4uagXPi4uU4klw70OhEaPSwriDLRx1EmAe8THIkVlk6gmgEuhI+HCWsvG9VItHswGu55S1Y5gAkHWilbkirgOeIJnS/hXMac6Tw+dUCyS1946Fn7cGoagO54UaXyV0aY6a7mANaXr5PDU5wYyGt37owfE456yo+v09kHkN63iOaNrF2tiHaUiPNIVQKayLPtrcVo3tpFTVg4oXTTwCbfuQdKVUWvAUegQ3wZZLi/lfSIKFagmYCbIAH4CtjWUktIxawBe6Bv0s5x1iWmHrpFTqxUcQ4n65zWfwN8BnjDvEVI++NPx20b0XasRr4vkzxgbFaY930u6fVFgRrkJrfE8YjHIp8t4hNgbWWENph3AEfyySfGMuu8zJrhPK1gh/8sWOZFe4xbhE3wB2w2/d7WtjvpdCtUug2zku9bOimUCIEuOYwNIflaJfGpix+A2x5My1079v1oRZ1dqhNeX8ZiDQ55+b4/flfDd7W/mqwb7/NqrqntWjovK7f2PPdWqb4j7d/AFA10363l8saAAAAAElFTkSuQmCC");
    }

    public TADragDropTestPanel() {
        this.setShowHeader(false);

        setWidth100();
        setHeight100();

        vLayout.setWidth100();

        html5Pane = new HTMLPane();
        html5Pane.setContentsURL("http://localhost:8087/html5fileupload/");
        html5Pane.setContentsType(ContentsType.PAGE);
        html5Pane.setCanAcceptDrop(true);

        html5Pane.setHeight100();
        html5Pane.setWidth100();

        // html5Pane.setZIndex(900000);

        final HStack piecesLayout = new HStack(40);
        piecesLayout.setLayoutMargin(20);
        piecesLayout.setLayoutAlign(Alignment.CENTER);
        piecesLayout.setMembers(new DragPiece("cube_blue.png", "b"),
                new DragPiece("cube_yellow.png", "y"), new DragPiece(
                        "cube_green.png", "g"));

        vLayout.addMember(piecesLayout);

        vLayout.addMember(html5Pane);
        addItem(vLayout);
    }

    private static final class DragPiece extends Img {
        public DragPiece(String src, String dragType) {
            setWidth(48);
            setHeight(48);
            setCursor(Cursor.MOVE);
            setAppImgDir("pieces/48/");
            setSrc(src);
            setCanDrag(true);
            setUseNativeDrag(true);
            setDragType(dragType);
            setCanDrop(true);
            setDragAppearance(DragAppearance.TRACKER);
            addDragStartHandler(new DragStartHandler() {
                @Override
                public void onDragStart(
                        @SuppressWarnings("unused") DragStartEvent event) {
                    final String src = getSrc();
                    EventHandler.setNativeDragData(src, src);

                    final double pageTop = getPageTop(), pageLeft = getPageLeft(), x = EventHandler
                            .getX(), y = EventHandler.getY();
                    EventHandler.setDragTrackerImage(
                            DRAG_TRACKER_IMAGE_URLS.get(getDragType()),
                            (int) (5.0 + (x - pageLeft) / getWidth() * 38.0),
                            (int) (5.0 + (y - pageTop) / getHeight() * 38.0));
                }
            });
        }

        @Override
        protected boolean setDragTracker() {
            EventHandler.setDragTracker(
                    Canvas.imgHTML("pieces/24/" + getSrc(), 24, 24), 24, 24,
                    15, 15);
            return false;
        }
    }

}

Test html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>HTML5 File Drag &amp; Drop API</title>
        <!-- <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> -->
        <style>
            #div1 {
                width: 350px;
                height: 70px;
                padding: 10px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    <body>        
        <p>Drag the W3Schools image into the rectangle:</p>
        
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <img id="drag1" src="https://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </body>
</html>

[Isomorphic]

What browser are you testing in? As the docs tell you, cross-frame drags can't be done in IE due to browser limitations. (always post this).

What are the contents of the Developer Console (this also is always required when posting).

You've also forgotten to say what product and version you're using (again always required).

Finally, are you getting any events or nothing at all?

[Martin00001]

I mainly test in Chrome ([FONT=Segoe UI, Tahoma, sans-serif][COLOR=#303942]Version [/COLOR][/FONT]57.0.2987.133), I also tried with Firefox (Version 50.1.0).

In both browsers no event is fired on the test html side. The onDragStart event is fired on the GWT side and looks good.

I activated Drag and Drop Debug Logging in the developer console and got following log messages.

08:24:23.489:MDN3:INFO:dragDrop:target is draggable with dragOperation: drag, dragTarget is : [Img ID:isc_TADragDropTestPanel_DragPiece_1]
08:24:23.527:dragstart9:INFO:dragDrop:Started dragOperation: drag with dragTarget: [Img ID:isc_TADragDropTestPanel_DragPiece_1] dragAppearance: none
08:24:23.615:dragover2:DEBUG:dragDrop:New drop target: [HTMLPane ID:isc_HTMLPane_0]
08:24:24.118:drop8:INFO:dragDrop:end of drag interaction

Our SmartGWT version is 6.0p (Tue Feb 28 12:52:00 GMT+100 2017) and GWT Version 2.6

Thank your for your help

[Isomorphic]

So what's happening here is that an HTMLPane that contains an iframe will automatically be masked during dragging, in order to prevent the iframe from swallowing events and ruining the drag (which is a concern with a normal drag).

The simplest way to get around this would be to switch to using a Canvas, and write your own getInnerHTML() override to return an <iframe> element. Then automatic masking will not kick in.

[Isomorphic]

We've fixed SGWT 6.0p and newer releases so that you can call Canvas.setUseDragMask(false) on the HTMLPane to resolve this issue. The change will be in the nightly builds dated 2017-05-02 and beyond.

[Martin00001]

Thank you, iIwill try it.