Drag and drop of img on a canvas to window

[mattcecile]

Hi, I'm trying to implement drag and drop of an Img on a canvas to a Window. I've found two issues with this:

1) While dragging the image around the browser and dragging over the Window element, it appears to go behind the window and just shows the cursor, not the dragged image.
2) While dragging, the image cannot leave the canvas borders - disappears on the top, left, etc. This is different from the behavoiur when dragging from a VStack.

Both the issues do not occur if the Img resides as a member of a VStack, but a VStack won't work for our implementation - trying to drag and drop images on a map.

The following code demonstrates the issue in a modified showcase sample:

package com.smartgwt.sample.showcase.client.draganddrop;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.sample.showcase.client.PanelFactory;
import com.smartgwt.sample.showcase.client.ShowcasePanel;

public class RecategorizeTree extends ShowcasePanel {
    private static final String DESCRIPTION = 
        "Dragging items from the list and dropping them on categories in the tree "+
        "automatically re-categorizes the item, without any code needed. "+
        "Make changes, then reload the page: your changes persist. "+
        "This behavior is (optionally) automatic where SmartGWT can establish a "+
        "relationship via foreign key between the DataSources two components are bound to.";

    public static class Factory implements PanelFactory {
        private String id;
        public Canvas create() {
            RecategorizeTree panel = new RecategorizeTree();
            id = panel.getID();
            return panel;
        }
        public String getID() {
            return id;
        }
        public String getDescription() {
            return DESCRIPTION;
        }
    }

    public Canvas getViewPanel() {
    	
    	Window window = new Window();
    	window.setWidth(300);
    	window.setHeight(300);
    	window.setCanDragResize(true);
    	window.setIsModal(false);
    	window.setLeft(500);
    	window.setTop(500);
    	window.setTitle("I want to drag to here");
    	window.setShowMinimizeButton(false);
    	window.setCanAcceptDrop(true);
    	window.show();
        Canvas canvas = new Canvas();
        canvas.addChild(new DragPiece("cube_blue.png", "b"));
        
        return canvas;
    }

    public String getIntro() {
        return DESCRIPTION;
    }
    private class DragPiece extends Img {  
        public DragPiece() {  
            setWidth(48);  
            setHeight(48);  
            setLayoutAlign(Alignment.CENTER);  
            setCanDragReposition(true);  
            setCanDrop(true);  
            setDragAppearance(DragAppearance.TARGET);  
            setAppImgDir("pieces/48/");  
        }  
          
        public DragPiece(String src, String dragType) {  
            this();  
            setSrc(src);  
            setDragType(dragType);  
        }  
    }  
}

[Isomorphic]

Canvases, when dragged, do not automatically deparent by default. We have some logic built into Layouts to deparent the canvas on drag start, (and add to a new layout on drop, etc) but this is not implemented at the Canvas level.

In order to handle this you'll need custom drag/drop logic in your application. The easiest way to proceed will probably be to set 'canDrag' (rather than 'canDragReposition'), and use dragAppearance "tracker" or "outline" rather than target, so you don't have to deparent the drag target when the user starts the drag, and then have a custom drop handler which performs your desired action (adding the drag target to a Window for example).
You'll also want to ensure that the keepInParentRect flag is not set to true so the user can drag beyond the bounds of the parent widget.

[mattcecile]

Thanks!

That works - thanks for the help!

Matt