8 Replies Latest reply on Apr 24, 2009 9:03 AM by m_hartnett

    how to swap the position of two objects?

    ningyuanma

      I have four self made componensts that I imported them into my main mxml file

      and placed each on four corners.

      What I want to achieve is to drag each component onto others then swap their position.

      For example, comp A is dragged over comp B, when this is detected, swap the position of A and B.

      But at the moment it doesn't seem to work properly. I could not figure out what's wrong with my code. Could any one help me achieve that?

      Many thanks to any who could give me a hand!

      ///////////////////////////////////////////////////////////////////

      *********This is one of my component***********

      *********All other three components are made the same way, except each source of image file is different******************

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="42" height="42">
          <mx:Image source="Images/air.png"/>
      </mx:Box>

       

       

      ////////////////////////////////////////////////////////////////////////////////////////

      *********This is my mxml that calls my components***********

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp="Comp.*" creationComplete = "onInit()">
          <mx:Script>
              <![CDATA[
                  import mx.containers.Box;
                  import Comp.Icon_illustrator;
                  import Comp.Icon_air;
                  import Comp.Icon_flash;
                  import Comp.Icon_flex;
                         
                  private var i_1:Icon_air; //1
                  private var i_2:Icon_flash; //2
                  private var i_3:Icon_flex; //3
                  private var i_4:Icon_illustrator; //4
                  private var origX:Number;
                  private var origY:Number;
                  private var startObj:String;
                  private var icons:Array;
                 
                  private var h_1:Box;
                  private var h_2:Box;
                  private var h_3:Box;
                  private var h_4:Box;

       

                  private function onInit():void{

       

                      //initialise all icons
                      i_1 = new Icon_air();
                      i_2 = new Icon_flash();
                      i_3 = new Icon_flex();
                      i_4 = new Icon_illustrator();
                     
                     
                      i_1.name = "i_1";
                      i_2.name = "i_2";
                      i_3.name = "i_3";
                      i_4.name = "i_4";
                     
                      //populate icon
                      showArea.addChild(i_1);
                      showArea.addChild(i_2);
                      showArea.addChild(i_3);
                      showArea.addChild(i_4);
                     
                      //set x position
                      i_1.x = 100;
                      i_2.x = 200;
                      i_3.x = 100;
                      i_4.x = 0;
                     
                      //set y position
                      i_1.y = 0;
                      i_2.y = 100;
                      i_3.y = 200;
                      i_4.y = 100;
                     
                      icons = [i_1, i_2, i_3, i_4];
                      //addEventListeners
                      for(var i:int=0; i<icons.length; i++){
                          icons[i].addEventListener(MouseEvent.MOUSE_DOWN, moveMe);
                          icons[i].addEventListener(MouseEvent.MOUSE_UP, stopDragMe);
                      }
                     
                  }//end of onInit
                 
                 
                  private function moveMe(e:MouseEvent):void{
                      e.currentTarget.startDrag();   
                      showArea.setChildIndex(DisplayObject(e.currentTarget), 0);
                     
                      origX = e.currentTarget.x;
                      origY = e.currentTarget.y;

       

                      startObj = e.currentTarget.name;   
                  }

       

                  private function stopDragMe(e:MouseEvent):void{
                      if(this[startObj].hitTestObject(icons[1])){
                          trace("hit 2");
                         
                          this[startObj].x = i_2.x;
                          this[startObj].y = i_2.y;
                         
                          i_2.x = origX;
                          i_2.y = origY;
                         
                      }else if(this[startObj].hitTestObject(icons[0])){
                          trace("hit 1");

       

                         
                          this[startObj].x = i_1.x;
                          this[startObj].y = i_1.y;
                         
                          i_1.x = origX;
                          i_1.y = origY;

       

                      }else{
                          trace("hit others");
                          this[startObj].x = origX;
                          this[startObj].y = origY;
                      }
                      e.currentTarget.stopDrag();
                 
                     
                  }//end of stopDragMe
                 
                 
              ]]>
          </mx:Script>
         
          <mx:Panel id="showArea" width="400" height="300" layout="absolute" backgroundColor="0x999999"/>

       

      </mx:WindowedApplication>

        • 1. Re: how to swap the position of two objects?
          m_hartnett Level 3

          Here is a sample of swaping two objects in Flex (not Air)   I believe it is the same.  Take a look at the way the x and y coords are swapped using the dragInitator and the currentTarget object in the dragDropHandler.

           

          Hope this helps

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

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

          <mx:Application

           

          xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

           

          <mx:Script>

          <![CDATA[

           

          import mx.containers.Box;

           

          import mx.core.UIComponent;

           

          import mx.managers.DragManager;

           

          import mx.core.DragSource;

           

          import mx.events.DragEvent;

           

           

          private var dragProxy:Box= new Box();

           

           

          public function dragDropHandler(e:DragEvent): void {

           

           

          //These variables are the x and y coords of the objects

           

          //the e.dragInitator is the object being dragged

           

          //the e.currentTarget is the object being dropped on

           

          //First save the x and y coords of each of the objects

           

          var xdi:int = e.dragInitiator.x;

           

          var ydi:int = e.dragInitiator.y;

           

          var xct:int = e.currentTarget.x;

           

          var yct:int = e.currentTarget.y;

           

           

          //now switch them around.

          e.dragInitiator.x = xct;

          e.dragInitiator.y = yct;

          e.currentTarget.x = xdi;

          e.currentTarget.y = ydi;

          }

           

           

          public function dragEnterHandler(event:DragEvent):void {

           

          DragManager.acceptDragDrop(UIComponent(event.target));

          }

           

           

          public function mouseMoveHandler(event:MouseEvent):void {

           

          if(event.buttonDown == false) return;

           

           

          var dragInitiator:UIComponent = event.target as UIComponent;

           

          var dragSource:DragSource = new DragSource();

           

          dragProxy =

          new Box();

          dragProxy.width = dragInitiator.width;

          dragProxy.height = dragInitiator.height;

          dragProxy.setStyle(

          "borderStyle","solid")

          dragProxy.setStyle(

          "borderColor","0x000000")

          dragProxy.setStyle(

          "backgroundColor","0xc6c6c6");

           

          DragManager.doDrag(dragInitiator, dragSource, event, dragProxy,

          event.localX * -1, event.localY * -1, 1.00);

           

          }

           

          ]]>

           

          </mx:Script>

           

          <mx:Canvas width="84" height="93" x="23" y="14"

          borderStyle="

          solid"

          borderColor="

          #030303"

          backgroundColor="

          #F83C3C"

          dragEnter="dragEnterHandler(event)"

          dragDrop="dragDropHandler(event)"

          mouseMove="mouseMoveHandler(event)"

          >

           

          </mx:Canvas>

           

          <mx:Canvas width="84" height="93" x="223" y="14"

          borderStyle="

          solid"

          borderColor="

          #030303"

          backgroundColor="

          #C5F83C"

          dragEnter="dragEnterHandler(event)"

          dragDrop="dragDropHandler(event)"

          mouseMove="mouseMoveHandler(event)"

          >

           

          </mx:Canvas>

           

           

          </mx:Application>

          1 person found this helpful
          • 2. Re: how to swap the position of two objects?
            ningyuanma Level 1

            Many thanks wingobaxter!

             

            What if I need the objects be created dynamiclly?

            say I have this component to be imported?

            *********This is one of my component***********

            *********All other three components are made the same way, except each source of image file is different******************

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="42" height="42">
                <mx:Image source="Images/air.png"/>
            </mx:Box>

             

             

            So far I still could not get things work under dynamic creation.

            • 3. Re: how to swap the position of two objects?
              ningyuanma Level 1

              Now I've tried to make it creating components dynamically, but I get an error in the last line of mouseMoveHandler

              DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

               

              And the error is

              TypeError: Error #1009: Cannot access a property or method of a null object reference.

               

              How could I resolve this problem?

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp="Comp.*" creationComplete = "onInit()">
                  <mx:Script>
                      <![CDATA[
                          import mx.containers.Box;
                          import mx.events.DragEvent;
                          import mx.core.UIComponent;
                          import mx.managers.DragManager;
                          import mx.core.DragSource;
                          import Comp.Icon_illustrator;
                          import Comp.Icon_air;
                          import Comp.Icon_flash;
                          import Comp.Icon_flex;
                                 
                          private var i_1:Icon_air; //1
                          private var i_2:Icon_flash; //2
                          private var i_3:Icon_flex; //3
                          private var i_4:Icon_illustrator; //4
                          private var origX:Number;
                          private var origY:Number;
                          private var startObj:String;
                          private var icons:Array;
                          private var dragProxy:Box;

               

                          private function onInit():void{

               

                              //initialise all icons
                              i_1 = new Icon_air();
                              i_2 = new Icon_flash();
                              i_3 = new Icon_flex();
                              i_4 = new Icon_illustrator();
                             
                              i_1.name = "i_1";
                              i_2.name = "i_2";
                              i_3.name = "i_3";
                              i_4.name = "i_4";
                             
                              //populate icon
                              showArea.addChild(i_1);
                              showArea.addChild(i_2);
                              showArea.addChild(i_3);
                              showArea.addChild(i_4);
                             
                              //set x position
                              i_1.x = 100;
                              i_2.x = 200;
                              i_3.x = 100;
                              i_4.x = 0;
                             
                              //set y position
                              i_1.y = 0;
                              i_2.y = 100;
                              i_3.y = 200;
                              i_4.y = 100;
                             
                              icons = [i_1, i_2, i_3, i_4];
                              //addEventListeners
                              for(var i:int=0; i<icons.length; i++){
                                  icons[i].width = 42;
                                  icons[i].height = 42;
                                  icons[i].addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
                                  icons[i].addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
                                  icons[i].addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                              }
                             
                          }//end of onInit
                         
                          /////////////////////////////////////////////
                          // dragEnterHandler
                          /////////////////////////////////////////////
                          private function dragEnterHandler(event:DragEvent):void{
                              DragManager.acceptDragDrop(UIComponent(event.target));
                          }
                         
                          /////////////////////////////////////////////
                          // dragDropHandler
                          /////////////////////////////////////////////
                          private function dragDropHandler(e:DragEvent):void{
                              var xdi:int = e.dragInitiator.x;
                              var ydi:int = e.dragInitiator.y;
                              var xct:int = e.currentTarget.x;
                              var yct:int = e.currentTarget.y;
                 
                              //now switch them around.
                              e.dragInitiator.x = xct;
                              e.dragInitiator.y = yct;
                              e.currentTarget.x = xdi;
                              e.currentTarget.y = ydi;
                          }
                         
                          /////////////////////////////////////////////
                          // mouseMoveHandler
                          /////////////////////////////////////////////
                          private function mouseMoveHandler(event:MouseEvent):void{

               

                              var dragInitiator:UIComponent = event.target as UIComponent;

                              var dragSource:DragSource = new DragSource();
                              dragSource.addData(dragInitiator, "UIComponent");
                             

                              dragProxy = new Box();

                              dragProxy.width = 42;
                              dragProxy.height = 42;

                              dragProxy.setStyle("borderStyle","solid")
                              dragProxy.setStyle("borderColor","0x898989")
                              dragProxy.setStyle("backgroundColor","0xdcdcdc");

                              DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
                          }
                         
                      ]]>
                  </mx:Script>
                 
                  <mx:Panel id="showArea" width="400" height="300" layout="absolute" backgroundColor="0x999999"/>

               

              </mx:WindowedApplication>

              • 4. Re: how to swap the position of two objects?
                Michael Borbor Level 4

                This shows you how to create dynamic UI.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
                     <mx:Script>
                          <![CDATA[
                               import mx.controls.TextArea;
                               import mx.containers.Canvas;
                               private function createTextAreas():void{
                                    for(var a:Number=1;a<5;a++){
                                         var canvas:Canvas=new Canvas();
                                         var textArea:TextArea=new TextArea();
                                         textArea.text="I'm a Text Area " + a.toString();
                                         myVBox.addChild(canvas);
                                         canvas.addChild(textArea);     
                                    }
                               }
                          ]]>
                     </mx:Script>
                     <mx:VBox id="myVBox" />
                     <mx:Button click="createTextAreas()" label="Create text areas" />
                </mx:Application>
                
                
                • 5. Re: how to swap the position of two objects?
                  ningyuanma Level 1

                  Thanks, Michael Borbor!

                  I've made it creating components dynamically, but I get an error in the last line of mouseMoveHandler

                  DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

                   

                  And the error is

                  TypeError: Error #1009: Cannot access a property or method of a null object reference.

                   

                  How could I resolve this problem?

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp="Comp.*" creationComplete = "onInit()">
                      <mx:Script>
                          <![CDATA[
                              import mx.containers.Box;
                              import mx.events.DragEvent;
                              import mx.core.UIComponent;
                              import mx.managers.DragManager;
                              import mx.core.DragSource;
                              import Comp.Icon_illustrator;
                              import Comp.Icon_air;
                              import Comp.Icon_flash;
                              import Comp.Icon_flex;
                                     
                              private var i_1:Icon_air; //1
                              private var i_2:Icon_flash; //2
                              private var i_3:Icon_flex; //3
                              private var i_4:Icon_illustrator; //4
                              private var origX:Number;
                              private var origY:Number;
                              private var startObj:String;
                              private var icons:Array;
                              private var dragProxy:Box;

                   

                              private function onInit():void{

                   

                                  //initialise all icons
                                  i_1 = new Icon_air();
                                  i_2 = new Icon_flash();
                                  i_3 = new Icon_flex();
                                  i_4 = new Icon_illustrator();
                                 
                                  i_1.name = "i_1";
                                  i_2.name = "i_2";
                                  i_3.name = "i_3";
                                  i_4.name = "i_4";
                                 
                                  //populate icon
                                  showArea.addChild(i_1);
                                  showArea.addChild(i_2);
                                  showArea.addChild(i_3);
                                  showArea.addChild(i_4);
                                 
                                  //set x position
                                  i_1.x = 100;
                                  i_2.x = 200;
                                  i_3.x = 100;
                                  i_4.x = 0;
                                 
                                  //set y position
                                  i_1.y = 0;
                                  i_2.y = 100;
                                  i_3.y = 200;
                                  i_4.y = 100;
                                 
                                  icons = [i_1, i_2, i_3, i_4];
                                  //addEventListeners
                                  for(var i:int=0; i<icons.length; i++){
                                      icons[i].width = 42;
                                      icons[i].height = 42;
                                      icons[i].addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
                                      icons[i].addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
                                      icons[i].addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                                  }
                                 
                              }//end of onInit
                             
                              /////////////////////////////////////////////
                              // dragEnterHandler
                              /////////////////////////////////////////////
                              private function dragEnterHandler(event:DragEvent):void{
                                  DragManager.acceptDragDrop(UIComponent(event.target));
                              }
                             
                              /////////////////////////////////////////////
                              // dragDropHandler
                              /////////////////////////////////////////////
                              private function dragDropHandler(e:DragEvent):void{
                                  var xdi:int = e.dragInitiator.x;
                                  var ydi:int = e.dragInitiator.y;
                                  var xct:int = e.currentTarget.x;
                                  var yct:int = e.currentTarget.y;
                     
                                  //now switch them around.
                                  e.dragInitiator.x = xct;
                                  e.dragInitiator.y = yct;
                                  e.currentTarget.x = xdi;
                                  e.currentTarget.y = ydi;
                              }
                             
                              /////////////////////////////////////////////
                              // mouseMoveHandler
                              /////////////////////////////////////////////
                              private function mouseMoveHandler(event:MouseEvent):void{

                   

                                  var dragInitiator:UIComponent = event.target as UIComponent;

                   

                                  var dragSource:DragSource = new DragSource();
                                  dragSource.addData(dragInitiator, "UIComponent");

                   

                                  dragProxy = new Box();

                   

                                  dragProxy.width = 42;
                                  dragProxy.height = 42;

                   

                                  dragProxy.setStyle("borderStyle","solid")
                                  dragProxy.setStyle("borderColor","0x898989")
                                  dragProxy.setStyle("backgroundColor","0xdcdcdc");

                   

                                  DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
                              }
                             
                          ]]>
                      </mx:Script>
                     
                      <mx:Panel id="showArea" width="400" height="300" layout="absolute" backgroundColor="0x999999"/>

                   

                  </mx:WindowedApplication>

                  • 6. Re: how to swap the position of two objects?
                    Michael Borbor Level 4

                    You need to change this line:

                     

                    var dragInitiator:UIComponent = event.target as UIComponent;
                    

                    to this:

                     

                    var dragInitiator:UIComponent = event.currentTarget as UIComponent;
                    
                    1 person found this helpful
                    • 7. Re: how to swap the position of two objects?
                      ningyuanma Level 1

                      It works now!!! Thank you Michael Borbor

                      Could you explain a bit on what's the difference between

                      event.target

                      and

                      event.currentTarget

                      ? Because I don't really know when to use currentTarget and when to use target...

                       

                      Many thanks!

                      • 8. Re: how to swap the position of two objects?
                        m_hartnett Level 3

                        Take a look at the api documentation for the Event object.  This has info on currentTarget and target.

                         

                        http://livedocs.adobe.com/flex/3/langref/index.html

                         

                        Also read up on the event process

                         

                        http://livedocs.adobe.com/flex/3/html/help.html?content=events_02.html

                         

                        These docs are great and provide a lot of information