1 Reply Latest reply on Sep 11, 2010 2:43 PM by Flex harUI

    Can't find the correct event handler

    SiHoop Level 1

      In the following code, I create 5 canvases where each canvas behaves like a button. Each canvas contains a text field and each canvas is draggable. I want to trigger an event when the user drags off the side of the canvas, but instead it is triggered as soon as I roll off the text field. You'll see what I mean if you click on the text, then drag off the text on the side. It will trigger a trace.

       

      It's very important that I only trigger an event when I drag off the canvas, not the text. Is there an event handler that will do thios for me?

      Thank you!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.controls.Button;
                  import mx.controls.Image;
                  import mx.controls.Text;
                  private var canvas2:Canvas;
                  private var imageText:Text;
                  [Bindable] private var thisButtonNumber:Number
                  [Bindable] private var dragRectangle:Rectangle= new Rectangle(0, 0, 0, 300 )
                  private function init():void{
                      for(var i:int=0;i<5;i++){               
                          canvas2=new Canvas;
                          canvas2.addEventListener(MouseEvent.MOUSE_DOWN, allowDrag)
                          canvas2.width=300;
                          canvas2.y=i*30;
                          imageText=new Text;
                          imageText.selectable=false;
                          imageText.text="Button "+String(i);
                          imageText.x=130
                          imageText.y=5;
                          canvas2.addChild(imageText);
                          canvas1.addChild(canvas2);
                      }
                      function allowDrag(e:MouseEvent):void {
                          canvas1.addChild(DisplayObject(e.currentTarget));
                          e.currentTarget.startDrag(false, dragRectangle);
                          e.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, checkPosition)
                      }
                      function ROLL_OUTtest(e:MouseEvent):void{
                          trace("ROLL_OUTtest="+e.currentTarget)
                          e.currentTarget.stopDrag();
                      }
                      function checkPosition(e:MouseEvent):void{
                          e.currentTarget.addEventListener(MouseEvent.MOUSE_OUT, ROLL_OUTtest)
                      }
                  }
              ]]>
          </mx:Script>
              <mx:Canvas   id="canvas1" x="400" y="25"   backgroundColor="0xdddddd"  buttonMode="true"  useHandCursor="true" />
      </mx:Application>