12 Replies Latest reply on Nov 13, 2007 2:46 AM by msabljic

    Drag and Drop question

    msabljic Level 1
      I am trying to drag an UIComponent instance over an Image object and drag and drop work fine but i am having problem with dragProxy image. I would like to use my original drag source UIComponent as dragProxy image but if i do the following:

      public function dragItSubs(event:MouseEvent):void{

      // Get the drag initiator component from the event object.
      var dragInitiator:UIComponent = event.currentTarget as UIComponent;

      ////////////////////
      var dragProxy:UIComponent = new UIComponent;
      dragProxy = event.currentTarget as UIComponent;
      ////////////////////

      // Call the DragManager doDrag() method to start the drag.
      DragManager.doDrag(dragInitiator, event, dragProxy);
      }

      then the original UIComponent (which is a drag source) is used as dragProxy while dragging it but that same component dissapears from its original position as soon as drag starts. How can i accomplish that drag source UIComponent's "image" is used as dragProxy but the same source drag UIComponent is intact while dragging?

      thanks in advance
        • 1. Re: Drag and Drop question
          dave cragg Level 2
          The following URL has a function (getComponentBitmap) that might be what you need.

          http://www.flex2components.com/f2cblog/2006/05/18/flex2-dnd-bitmap-copy/
          • 2. Re: Drag and Drop question
            atta707 Level 2
            for further elaborate Dave's point, you'll need to make a copy of the drag source and set that copy as dragproxy.

            ATTA
            • 3. Re: Drag and Drop question
              msabljic Level 1
              That makes sense, will try that and let you know how did it go.

              thanks for help,
              best regards
              • 4. Re: Drag and Drop question
                msabljic Level 1
                I wen trought that tutorial and came up with this code:

                public function dragItSubs(event:MouseEvent):void{

                // Get the drag initiator component from the event object.
                var dragInitiator:UIComponent = event.currentTarget as UIComponent;

                /////////////////////////////////////////////////////////
                var target:UIComponent = event.currentTarget as UIComponent;
                var dragProxy:Bitmap;
                var myBitmapData:BitmapData = new BitmapData(target.width, target.height);
                myBitmapData.draw(target); // draw target onto bitmap
                dragProxy = new Bitmap(myBitmapData);
                /////////////////////////////////////////////////////////

                // Call the DragManager doDrag() method to start the drag.
                DragManager.doDrag(dragInitiator, event, dragProxy);

                }

                But now when i compile it I get the following error:

                1067: Implicit coercion of a value of type flash.display:Bitmap to an unrelated type mx.core:IFlexDisplayObject.

                on line:

                DragManager.doDrag(dragInitiator, event, dragProxy);

                Do you maybe know how can i solve this?

                thank you
                • 5. Re: Drag and Drop question
                  TeotiGraphix Level 3
                  Hi,

                  That was my link above, you are missing one important step.

                  For a BitMap to be added to a UIComponent (which the DragManager does), you need to wrap the BitMap like my function does with a UIComponent.

                  dragProxy = new Bitmap(myBitmapData);
                  var wrapper:UIComponent = new UIComponent();
                  wrapper.addChild(dragProxy);

                  DragManager.doDrag(dragInitiator, event, wrapper);

                  That should work fine without the corcion error.

                  Peace, Mike



                  • 6. Drag and Drop question
                    msabljic Level 1
                    You were right, i totally missed that part. I guess i need more sleep :( However, i added that part like you suggested so my code now looks like this:

                    public function dragItMain(event:MouseEvent):void{

                    // Get the drag initiator component from the event object.
                    var dragInitiator:UIComponent = event.currentTarget as UIComponent;

                    // Create a DragSource object.
                    var dragSource:DragSource = new DragSource();
                    dragSource.addData(dragInitiator, "main");

                    var target:UIComponent = event.currentTarget as UIComponent;
                    var bitmapData:BitmapData = new BitmapData(
                    Math.round(target.width / target.scaleX),
                    Math.round(target.height / target.scaleY),
                    false);
                    bitmapData.draw(target);

                    var bitmap:Bitmap = new Bitmap(bitmapData);

                    var bitmapHolder:UIComponent = new UIComponent();
                    bitmapHolder.addChild(bitmap);

                    // Call the DragManager doDrag() method to start the drag.
                    DragManager.doDrag(dragInitiator, dragSource, event, bitmapHolder);

                    }

                    But when i compile it, all i got is the following error:

                    ArgumentError: Error #2015: Invalid BitmapData.
                    at flash.display::BitmapData$iinit()

                    pointing to line:

                    var bitmapData:BitmapData = new BitmapData(
                    Math.round(target.width / target.scaleX),
                    Math.round(target.height / target.scaleY),
                    false);

                    So i am a little bit confused now :(
                    • 7. Re: Drag and Drop question
                      TeotiGraphix Level 3
                      Hi,

                      Have you stepped through the code and looked at the 'target' property value?

                      Seems to me your event.currentTarget is the problem. Using the 'is' keyword verses the Cast() means no rte when the type tries to change.

                      Try;

                      var target:UIComponent = UIComponent(event.currentTarget);

                      See if you now get an error to target being set.

                      Peace, Mike
                      • 8. Re: Drag and Drop question
                        msabljic Level 1
                        I tried with:

                        var target:UIComponent = UIComponent(event.currentTarget);

                        but still keep getting the same error. And if i trace target.width or target.height i get 0 as value so there is deinitely problem in that line but i am not sure why? :/

                        • 9. Re: Drag and Drop question
                          TeotiGraphix Level 3
                          Hi,

                          Well, then the problem is in your currentTarget. What is it, and how is it getting sized.

                          The RTE is becasue you are passing 0,0 to BitmapData. Find out why your UIComponent that is the currentTarget is not getting sized.

                          This will solve your problem.

                          Peace, Mike
                          • 10. Re: Drag and Drop question
                            msabljic Level 1
                            currentTarget is an UIComponent inside which i draw rectangle using it's 'graphic' property and drawRect method and then attach it to an Image component like this:

                            var rectUIComponent:UIComponent = new UIComponent();
                            rectUIComponent.graphics.beginFill(0xFF0000, 0.3);
                            rectUIComponent.graphics.drawRect(xpoz, ypoz, width), height);
                            rectUIComponent.graphics.endFill();

                            imageComponent.addChild(rectUIComponent);

                            There is definitely problem with rectUIComponent because if i now trace rectUIComponent.width or rectUIComponent.height i also get 0 value but the rectangle is clearly drawed on stage so i am not sure what's going on here?

                            • 11. Re: Drag and Drop question
                              TeotiGraphix Level 3
                              Hi,

                              The rectangle is what is causing your problems. There is no default measurements in a UIComponent when you use the drawing API. The component even though you are drawing graphics thinks that it is 0 by 0.

                              Now what I would do is create a skin container component and load a skin that draws, then set it's measured width and height.

                              Or, you could just create a quick subclass of UIComponent and doing your drawing there inside. Override measure() and set your measuredWidth and measuredHeight.

                              Peace,
                              Mike
                              • 12. Re: Drag and Drop question
                                msabljic Level 1
                                quote:

                                Originally posted by: TeotiGraphix
                                Now what I would do is create a skin container component and load a skin that draws, then set it's measured width and height.

                                Or, you could just create a quick subclass of UIComponent and doing your drawing there inside. Override measure() and set your measuredWidth and measuredHeight.



                                If it's not too much too ask, can you please post an example on how to do that using either one of the approaches you menationed?

                                thank you very much,
                                best regards