16 Replies Latest reply on Nov 28, 2009 2:07 AM by David_F57

    Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4

    PMategaonkar

      Hi All,

       

      I have developed some part of my project already in flex builder 3 with SDK 3.3. Now to avail the facilities of Flash Catalyst, I have migrated my code in Flash Builder 4 with inbuilt SDK Flex 4.0(Build 10485). Everything is working fine except drag and drop of object by end user.

      I have used MouseDown and MouseUp events for drag and drop using DragManager.

       

      Do I need to change something or to change my approach.


      Please suggest.

       

      Regards

        • 1. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
          PMategaonkar Level 1

          Hi All,

          I found a very strange thing with this problem. When I provide some background color to my base canvas then drag and drop works fine but as soon as I remove the background style from my canvas tag, drag and drop does not work.

          I know this sounds a bit strange but it's working in this manner  only. Does anyone knows the cause and solution of it?

           

          Any help or pointer to solution is appreciated .

           

          Regards,

          • 2. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
            mewk Level 3

            PM,

             

            I believe what you are observing is the intended behavior. For example spark.components.Group will only trigger a dragOver/dragEnter when a dragSource has been moused over something "tangible" w/in its space. There are a number of use cases where this might be desirable behavior and if not designed in this way would be more difficult to code around.

             

            In your particular case then, all you need to do is provide something tangible to mouseOver. Here is one potential solution:

            <s:Group dragEnter="dragEnterHandler(event)">
              <s:Rect width="100%" height="100%">
                <s:fill><s:SolidColor alpha="0" /></s:fill>
              </s:Rect>
            </s:Group>
            

             

            There's probably a better workaround for this, but that's what I've been doing. Also, I wrote the appended test project a while back, you may find it useful.

             

            - e

            • 3. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
              Shongrunden Adobe Employee

              Does Group.mouseEnabledWhereTransparent help?


              • 4. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                PMategaonkar Level 1

                Thanks for your reply but I think I could not explain my problem properly. The code I have right now is working fine with flex builder 3.

                 

                I am giving here the structure of my code:

                 

                <mx:Application>
                    <mx:Canvas id="cnv1">
                     <mx:Canvas id="cnv2">
                       <mx:Canvas id="cnv3">
                       </mx:Canvas>
                     </mx:Canvas>
                    </mx:Canvas>
                </mx:Application>
                

                 

                 

                Here I am adding cnv3 at run time and want to drag it from one place to another place in cnv2.

                 

                Now as I am using some functionalities from Catalyst so I had to change some part of it. And now cnv3 is a part of <s:Group>.

                 

                And here my trouble starts with drag and drop.

                 

                Please suggest some by which I need not to write much code to make it work as testing of this has been completed and its working as per expectations.

                 

                Regards,

                • 5. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                  David_F57 Level 5

                  Hi

                   

                  <mx:Canvas id="myCanvas" mouseDown="myCanvas.startDrag()" mouseUp="myCanvas.stopDrag()">

                   

                  the above line works fine, I think that without seeing how you are preparing your drag functions its hard to say what the problem is, I would suspect that it has nothing to do with Flex3/Flex4 but something in the way you are preparing the drag receiver.

                   

                  Make sure you are attaching drag events to the correct components, or do it the easy way and just do as above so you can just drag the canvas around. You don't need drag and drop then

                   

                  David

                  • 6. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                    PMategaonkar Level 1

                    Thanks a lot David, it seems working for me. But the problem now I have is dropping. Even if I leave the mouse, canvas did not get drop. It moves along with mouse pointer. Am I missing something or need to change the code?

                     

                    Regards,

                    • 7. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                      David_F57 Level 5

                      Hi,

                       

                      First thing is to make sure that the parent containers have no attached drag functions as it sounds like there is something 'stealing' your mouse up, event propagation can sometimes cause a few issues. Just try this code in a new project as this should just work. One more thought, does  your draggable canvas  have alpha or backgroundcolor properties set ?.

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="955" minHeight="600">

                      <fx:Declarations>

                      <!-- Place non-visual elements (e.g., services, value objects) here -->

                      </fx:Declarations>

                      <s:Group x="34" y="10" width="670" height="459">

                      <mx:Canvas x="41" y="17" width="591" height="432" backgroundColor="#775D5D">

                      <mx:Canvas id="cc" x="49" y="51" width="87" height="78" label="drag me"

                         mouseDown="cc.startDrag()" mouseUp="cc.stopDrag()"  backgroundColor="#431919"/>

                      </mx:Canvas>

                      </s:Group>

                      </s:Application>

                       

                      David

                      • 8. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                        PMategaonkar Level 1

                        Hi David,

                        Sample application sent by is working fine till I don't remove the background color. As soon as I remove background color and apply border style and color( to see the internal canvas) drag and drop stops..

                        Is transparency has to do something with this problem?

                        • 9. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                          David_F57 Level 5

                          Hi,

                           

                          canvas doesn't play nice with transparency(thats why i mentioned about properties, i should have been clearer), if you can, using group instead of canvas would be a cleaner solution (group handles transparency very well). The other option is to use a background alpha above 0 on the canvas so you can still see behind the canvas but it will allow the drag.

                           

                          David

                          • 10. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                            mewk Level 3

                            @Shongrunden, it seems like Group.mouseEnabledWhereTransparent= true; should help (and I had totally overlooked this option), but, in the end, it didn't change the dragEnter/Over behavior.

                             

                            Now about David's approach. This is nice, clean and simple but has one major drawback: when dragging beyond the borders of the parent container you end up stretching the parent Container. Play with the following code and drag the green box onto the red square and you'll see what I mean:

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/halo"
                                     frameRate="50">
                            
                              <mx:Canvas id="cnv1" width="500" height="500" backgroundColor="red">
                                <mx:Canvas id="cnv2" width="400" height="400" x="50" y="50" backgroundColor="blue">
                                  <mx:Canvas id="cnv3" width="100" height="100" backgroundColor="green"
                                         mouseDown="cnv3.startDrag()" mouseUp="cnv3.stopDrag()"/>
                                </mx:Canvas>
                              </mx:Canvas>
                            
                            </s:Application>
                            

                             

                             

                            Inspired by this and working off some code I came across on this board a few weeks ago, I wrote the following draggable Canvas component:

                             

                            --------------------------------- components/DraggableCanvas.as -------------------------------------------

                             

                            package components
                            {
                              import flash.display.DisplayObjectContainer;
                              import flash.events.MouseEvent;
                              import flash.geom.Point;
                            
                              import mx.containers.Canvas;
                            
                              public class DragableCanvas extends Canvas
                              {
                                public var allowDrag:Boolean = true;      // in case you want to disable drag
                                private var startingMouseLocation:Point;
                                private var parCont:DisplayObjectContainer;
                            
                                public function DragableCanvas() {
                                  super();
                                  addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);
                                  // GREAT EXAMPLE to understanding useCapture, set this to true and the blue container will never get dragged :-) !!!!!
                                }
                            
                                protected function mouseDownHandler(event:MouseEvent):void  {
                                  if (allowDrag) {
                                    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
                                    stage.addEventListener(MouseEvent.MOUSE_UP, dragEndHandler);
                                    startingMouseLocation = new Point(DragableCanvas(event.currentTarget).mouseX, DragableCanvas(event.currentTarget).mouseY);
                                    parCont = this.parent;
                            
                                    event.stopPropagation();   // stopPropogation if you don't want any dragable parent containers to also move
                                  }
                                }
                            
                                private function dragMoveHandler(event:MouseEvent) : void {
                                  var mousePtrLocalParent:Point = parCont.globalToLocal( new Point(event.stageX, event.stageY) );
                                  // determine where mouse wants to move this
                                  var targetX:Number = mousePtrLocalParent.x - startingMouseLocation.x;
                                  var targetY:Number = mousePtrLocalParent.y - startingMouseLocation.y;
                            
                                  // keep this within parent container limits
                                  var var1:Number; var var2:Number
                                  this.x = var1 = Math.min( parCont.width - this.width,
                                    Math.max(0, targetX) );
                                  this.y = var2 = Math.min( parCont.height - this.height,
                                    Math.max(0, targetY) );
                                }
                            
                                private function dragEndHandler(event:MouseEvent) : void {
                                  stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
                                  stage.removeEventListener(MouseEvent.MOUSE_UP, dragEndHandler);
                                }
                              }
                            }
                            

                             

                             

                            which can be used like so:

                             

                            ---------------------------- main.mxml ------------------------------------

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/halo"
                                     minWidth="1024" minHeight="768"
                                     frameRate="50"
                                     xmlns:comp="components.*">
                              
                              <mx:Canvas id="cnv1" width="500" height="500" backgroundColor="red">
                                <comp:DraggableCanvas id="cnv2" width="400" height="400" x="50" y="50" backgroundColor="blue">
                                  <comp:DraggableCanvas id="cnv3" width="100" height="100" backgroundColor="green" />
                                </comp:DraggableCanvas>
                              </mx:Canvas>
                              
                            </s:Application>
                            

                             

                             

                            so this might be as simple as replacing <mx:Canvas /> with <comp:DraggableCanvas />

                             

                            - e

                            1 person found this helpful
                            • 11. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                              PMategaonkar Level 1

                              Hi,

                              By using group instead of canvas , do you mean by replacing <mx:Canvas> with <s:Group> ? Sorry if this is too silly but I am very new to spark..

                              And second doubt is whether this group will support other functionality and properties which I have for canvas.

                               

                              Another possibility is to have a <s:Group> as outer shell for existing canvas. Will that do?

                               

                              Regards,

                              • 12. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                                David_F57 Level 5

                                Hi,

                                 

                                Yes the idea is rather than use canvas use group, group is like a shaved down version of canvas, Mewk is as usual very correct about the dragging that causes issues with container resizing(i'm lazy so I just use clip content and switch off the scrollpolicy).

                                 

                                At the end of the day its about what you feel comfortable with and if you would prefer to use canvas so be it, but better to go the spark direction

                                 

                                this is long winded canvas settings but it resolves the transparency issue with canvas dragging, its mainly about background and content having colors set but then set to alpha 0 so that the mouse works.

                                 

                                <mx:Canvas id="cc" x="49" y="51" width="87" height="78"  borderColor="#0B0A0A" backgroundColor="#CC8282" backgroundAlpha="0"

                                   mouseDown="cc.startDrag()" mouseUp="cc.stopDrag()" mouseEnabled="true"  dropShadowVisible="true" cornerRadius="5" borderVisible="true" contentBackgroundColor="#0E0D0D" contentBackgroundAlpha="0.0"/>

                                 

                                David

                                • 13. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                                  David_F57 Level 5

                                  http://gumbo.flashhub.net/dragger/

                                   

                                  just a simple example with a canvas and a group child. (source view enabled)

                                   

                                   

                                  the shadowed baox is a canvas and the panel is set in a group you will notice that drag works if you drag from the panel or from the group parent of the panel.

                                   

                                   

                                  David

                                  1 person found this helpful
                                  • 14. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                                    PMategaonkar Level 1

                                    Thanks a lot David and Mewk... My application is working fine now. But I am not sure whether the solution is correct or not but its working for me right now.

                                     

                                    What  I have done is to set backgroundcolor to my parent canvas and backgroundAlpha ="0.0". This is working fine without changing any code..

                                     

                                    Thanks once again guys...

                                     

                                    Cheers

                                    • 15. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                                      mewk Level 3

                                      @PM, cool cool. Glad you got it working. That was the point I had been trying to make earlier -- you need something "tangible" (i.e. backgroundColor) to make the drag events register.

                                       

                                      @David, oh the good ol clip-content-and-switch-off-the-scrollpolicy trick. LOL

                                      I revisited jdesko's post http://forums.adobe.com/thread/524469?tstart=90 and, taking lessons learned there, realized that in the code above, better is:

                                        private function dragMoveHandler(event:MouseEvent) : void {
                                          // all the code I had before + ...
                                          
                                          event.updateAfterEvent();
                                        }
                                      

                                      this gives smooth dragging at any fps (I had jacked up the fps before -- bad practice this...).

                                       

                                      - e

                                      • 16. Re: Drag and Drop working fine with Flex Builder 3 but not with Flash Builder 4
                                        David_F57 Level 5

                                        Just a little addition to the quick n' dirty start/stop drag

                                         

                                        protected function pnl_mouseDownHandler(event:MouseEvent):void

                                        {

                                        var rect:Rectangle = new Rectangle(this.x,this.y,this.width-pnl.width,this.height-pnl.height);

                                        pnl.startDrag(false, rect);

                                         

                                        }

                                        This controls the drag beyond parent co-ordinates, no stretchy... stretchy
                                        David