Drag Create Issue

[ahaertig]

Hallo,

for an application I develop I need something similiar to the showcase examaple 'Drag Create' http://www.smartclient.com/smartgwt/...ects_dd_create
In the example the four lower boxes (PieceBin) are Canvases. I need a VStack instead of a Canvas. If the class PieceBin extends Vstack instead of Canvas the example doesn't work anymore. When you drag a cube and drop it on a box the cube disappears from the top.

Is this a bug?

[Isomorphic]

See Layout.canDropComponents - Layouts have built-in drag and drop behaviors whereas Canvas does not - the sample code shown for Canvas won't work with a Layout.

[ahaertig]

When I set the PieceBin to setCanDropComponents(false) and setCanAcceptDrop(true) (as mentionend in the docs) drag & drop does not work. The PieceBin won't accept dragged pieces.
Could you please explain what I'm doing wrong?

[ahaertig]

Could someone please give me a hint how I can change the sample code to work with Layouts as PieceBin? I really need this feature and I can't find a solution.

Thanks.

[Isomorphic]

Rather than ask for a sample to be created just for you, try reading the docs and getting as close as you can, then posting your attempt.

[ahaertig]

Ok, here's what I tried so far.
The original code for the piece bins looks like this:

 public static class PieceBin extends Canvas {  
         public PieceBin(String edgeImage, String... dropTypes) {  
             setWidth(100);  
             setHeight(100);  
             setShowEdges(true);  
             setEdgeSize(6);  
             setEdgeImage(edgeImage);  
             setOverflow(Overflow.HIDDEN);  
             setCanAcceptDrop(true);
             setDropTypes(dropTypes);           
             addShowContextMenuHandler(new ShowContextMenuHandler() {  
                 public void onShowContextMenu(ShowContextMenuEvent event) {  
                     event.cancel();  
                 }  
             });  
             addDropOverHandler(new DropOverHandler() {  
                 public void onDropOver(DropOverEvent event) {  
                     if (willAcceptDrop())  
                         setBackgroundColor("#ffff80");  
                 }  
             });  
             addDropOutHandler(new DropOutHandler() {  
                 public void onDropOut(DropOutEvent event) {  
                     setBackgroundColor("#ffffff");  
                 }  
             });  
             addDropHandler(new DropHandler() {  
                 public void onDrop(DropEvent event) {  
                     addChild(new DroppedPiece(  
                             ((Img) EventHandler.getDragTarget()).getSrc(),  
                             getOffsetX() - 15 - getEdgeSize(),  
                             getOffsetY() - 15 - getEdgeSize()  
                     ));  
                 }  
             });  
         }  
     }

I added the following modifications to the code:

 public static class PieceBin extends [b]VLayout[/b] {  
         public PieceBin(String edgeImage, String... dropTypes) {  
             setWidth(100);  
             setHeight(100);  
             setShowEdges(true);  
             setEdgeSize(6);  
             setEdgeImage(edgeImage);  
             setOverflow(Overflow.HIDDEN);  
             setCanAcceptDrop(true);
             [b]setCanDropComponents(false);[/b]  
             setDropTypes(dropTypes);           
             addShowContextMenuHandler(new ShowContextMenuHandler() {  
                 public void onShowContextMenu(ShowContextMenuEvent event) {  
                     event.cancel();  
                 }  
             });  
             addDropOverHandler(new DropOverHandler() {  
                 public void onDropOver(DropOverEvent event) {  
                     if (willAcceptDrop())  
                         setBackgroundColor("#ffff80");  
                 }  
             });  
             addDropOutHandler(new DropOutHandler() {  
                 public void onDropOut(DropOutEvent event) {  
                     setBackgroundColor("#ffffff");  
                 }  
             });  
             addDropHandler(new DropHandler() {  
                 public void onDrop(DropEvent event) {  
                     [b]addMember[/b](new DroppedPiece(  
                             ((Img) EventHandler.getDragTarget()).getSrc(),  
                             getOffsetX() - 15 - getEdgeSize(),  
                             getOffsetY() - 15 - getEdgeSize()  
                     ));  
                 }  
             });  
         }  
     }

In the docs is written that the combination of setCanAcceptDrop(true); setCanDropComponents(false); suppresses the build in D&D logic but gives me the possibility for a custom implementation. But after changing the code the drop handler does not receive any drop events. When I set setCanDropComponents(true); the drag pieces are moved into the drop boxes after a drag & drop action.

[microp]

I have the same issue here

[twoonke]

This is still an issue in SmartGWT 3.0. Any new info on this? Or any other way to avoid drop lines and the standard SmartGWT D&D behaviour but still receive drop events?

[Isomorphic]

Since you're adding the component manually, cancel() the DropEvent to prevent default behavior.

[twoonke]

Thanks for the reply. I read http://forums.smartclient.com/showthread.php?t=19925 and am using DropEvent.cancel() at the moment, but I still have visible droplines wandering through the layout. Is there a way to switch them off?

[Isomorphic]

We'll double-check this, in the meantime, make sure you are setting canAcceptDrop:true *after* setting canDropComponents:false, as one flag sets the other. If that's not working, try setting canAcceptDrop after draw.

[Isomorphic]

We've fixed this so that canDropComponents=false and canAcceptDrop=true will still allow drop interactions. We've also added a new layout API, setShowDropLines(false), which prevents the visual drop-marker. See builds dated Feb 10 and later

[twoonke]

Cool, thanks!