2 Replies Latest reply on Nov 6, 2009 12:40 PM by christoferek

    drag and drop outside the canvas not working

    christoferek

      Hi,

       

      I changed the code below to drag and drop a canvas inside another canvas. Why can't I move the red canvas outside into the blue one? The mouse pointer must be inside the red canvas to be able to move the red one. Amazing.

       

      Can you help?

       

      Chris

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="780"
          creationComplete="creationCompleteHandler()">

       

          <mx:Canvas id="invisible_holder" width="100%" height="100%" backgroundColor="#ff0000" backgroundAlpha="0"  />
          <mx:Canvas id="BlueCanvas" x="97" y="263" width="300" height="300" backgroundColor="blue" backgroundAlpha="0.1">
             
              <mx:Canvas id="RedCanvas"     x="26" y="38" width="200" height="200"  mouseDown="childMouseDown(event)"
                   backgroundColor="red">
                   <mx:Label id="dd" text="labe lll">
                      
                   </mx:Label>
              </mx:Canvas>
             
          </mx:Canvas>
         
          <mx:Script>
              <![CDATA[
                  import mx.core.DragSource;
                  import mx.core.UIComponent;
                  import mx.events.DragEvent;

                  import mx.managers.DragManager;         

       

                  //Variables used to hold the image's location
                  public var xOff:Number;
                  public var yOff:Number;
                  public var xThisBefore:Number;
                  public var yThisBefore:Number;
                  public var xThisAfter:Number;
                  public var yThisAfter:Number;                 
                  //Create the event listeners for the drag operations.
                  private function creationCompleteHandler():void
                  {
                      RedCanvas.addEventListener(DragEvent.DRAG_DROP,dropEnter);
                      RedCanvas.addEventListener(DragEvent.DRAG_ENTER, applicationDragEnter);
                  }       
                 
                  private function dropEnter(event:DragEvent):void{
                      //RedCanvas.x = this.mouseX -xOff;
                      //RedCanvas.y = this.mouseY - yOff;
                      xThisAfter = this.mouseX;
                      yThisAfter = this.mouseY;
                      RedCanvas.x = xOff + (xThisAfter - xThisBefore);
                      RedCanvas.y = yOff + (yThisAfter - yThisBefore);

                      //this.addChildAt(RedCanvas,1)
                      changeZIndex(1);
                      RedCanvas.addEventListener(DragEvent.DRAG_DROP,dropEnter);
                      RedCanvas.addEventListener(DragEvent.DRAG_ENTER, applicationDragEnter);   
                  }
                 
                  private function changeZIndex( direction:int ): void {
                      var newIndex:int = BlueCanvas.getChildIndex(RedCanvas) + direction;

       

                      if( newIndex >= 0 && newIndex < BlueCanvas.numChildren ) {
                      BlueCanvas.setChildIndex(RedCanvas, newIndex );
                      }
                  }
                 
                  //The application accepts the drag drop.
                  //(except when the user drags the red canvas over the blue canvas)    
                  private function applicationDragEnter(event:DragEvent):void
                  {
                      if (event.dragSource.hasFormat("data"))
                      {
                          DragManager.acceptDragDrop(event.currentTarget as UIComponent);
                      }
                  }
                 
                  //Start the drag drop operation
                  private function childMouseDown(event:MouseEvent):void
                  {
                      xThisBefore = this.mouseX;
                      yThisBefore = this.mouseY;

                      xOff = RedCanvas.x;
                      yOff = RedCanvas.y;
                     
                      var data:String = "data";
                      var source:DragSource= new DragSource();
                      source.addData(data, "data");
                      DragManager.doDrag(event.currentTarget as UIComponent, source, event);
                  }           
              ]]>
          </mx:Script>
      </mx:Application>