Using DragAppearance.TARGET in FlowLayout causes drag to fail

[dbscott525]

When DragAppearance.TARGET is set on an object in a FlowLayout, the dragged object only displays while inside the boundaries of the containing canvas. When the object is dragged "outside" the FlowLayout boundaries it disappears thus making it difficult to drop onto another object. The drop will work but it is impossible to see where the canvas is being dropped because it disappears.

Here is the test code that demonstrates this problem.

[B]public[/B] [B]class[/B] DragAppearanceTargetFailCase [B]extends[/B] VLayout {
    [B]public[/B] DragAppearanceTargetFailCase() {
        setBorder("blue");
 
        setWidth(200);
        setHeight(100);
 
        FlowLayout flowLayout = createFlowLayout();
        addMember(flowLayout);
        Container failObject = addContainer(flowLayout);
        flowLayout.addTile(failObject);
    }
 
    [B]private[/B] FlowLayout createFlowLayout() {
        FlowLayout flowLayout = [B]new[/B] FlowLayout();
        flowLayout.setCanAcceptDrop([B]true[/B]);
        flowLayout.setDropTypes("DROP_TYPE");
        flowLayout.setBorder("2px solid blue");
        flowLayout.setMargin(10);
        [B]return[/B] flowLayout;
    }
 
    [B]private[/B] Container addContainer(FlowLayout flowLayout) {
        String containerColor = "red";
        Container box = [B]new[/B] Container(containerColor);
        box.setHeight(25);
        box.setWidth(100);
        box.setCanDragReposition([B]true[/B]);
        box.setCanDrop([B]true[/B]);
        box.setBackgroundColor(containerColor);
        box.setID(containerColor);
        flowLayout.addTile(box);
 
        [B]return[/B] box;
    }
 
    [B]public[/B] [B]class[/B] Container [B]extends[/B] VLayout {
 
        [B]public[/B] Container(String id) {
 
            setID(id + "container");
 
            setWidth(1);
            setHeight(1);
            setMembersMargin(3);
 
            setCanDragReposition([B]true[/B]);
            setCanDrop([B]true[/B]);
            setDragAppearance(DragAppearance.[B][I]TARGET[/I][/B]);
            setDragType("DROP_TYPE");
        }
    }
}

[Isomorphic]

Thanks for the test code. We'll take a look at what's going on and let you know

Regards
Isomorphic Software

[Isomorphic]

A quick follow up on this:
What you're after isn't currently available for the FlowLayout widget.
dragAppearance "target" is a special mode where the widget in question is actually moved as the user drags the mouse. By default, it is not deparented when this occurs, so it continues to be contained by its parent canvas's HTML.
This is desirable for many kinds of drag interactions (most obviously a simple drag reposition, but also potentially a drag-drop interaction where you're moving things around within a parent view). It obviously is not well suited for drag and drop interactions where the child is being logically dropped outside the parent canvas.

You may have noticed that we do support dragging outside the parent with dragAppearance tracker for some classes of Canvas. There is some custom code built into HLayout and VLayout which automatically handles de-parenting a member with dragAppearance "target" when dragging begins, and replacing it with a same-sized spacer [to keep the geometry of the layout unchanged] for the duration of the drag interaction.
This feature does not exist for FlowLayouts. It is something we could potentially add support for. If you'd be interested in this, let us know and we'll take a look at what's involved.

Thanks
Isomorphic Software

[dbscott525]

We need to drag a canvas both within a FlowLayout (intra-FlowLayout) and between two FlowLayouts (inter-FlowLayout). We’re open to any solution.

Would this code found in the SmartGWT showcase work?

        DragPiece blue = new DragPiece("pawn_blue.png") { 
            @Override 
            protected boolean setDragTracker() { 
                EventHandler.setDragTracker("Blue Piece"); 
                return false; 
            } 
        }; 
        blue.setID("bluePiece"); 
        blue.setTitle("Blue Piece"); 
        blue.setLeft(50); 
        blue.setTop(50); 
                 
        DragPiece green = new DragPiece("pawn_green.png"){ 
            @Override 
            protected boolean setDragTracker() { 
                String html = Canvas.imgHTML("pieces/24/pawn_green.png", 24, 24); 
                EventHandler.setDragTracker(html); 
                return false; 
            } 
        };

[Isomorphic]

Yes - the easiest solution here is to use dragAppearance tracker, and use EventHandler.setDragTracker(...) to customize the display to show something that makes sense for you.
The Canvas.imgHTML(...) solution is a nice way to quickly get an <img...> tag without writing raw HTML.

Regards