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:
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:
Code:
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); } } }
Comment