如何將圓形從一個容器拖到另一個容器中的flex項目

Question

我正在創建一個flex Air項目，因此mxml文件將運行。
我在一側有一個大圓圈，並且在另一側會有相同的圓圈。

現在如何將任何圈從任何大圈拖到另一側。或者它可能像任何兩個有圓圈的容器，那麼如何拖放圓圈？

對於一個圓圈，我可以做拖放。但是我想在左手邊有一個大圓圈，右手邊有一個大圓圈，並且有類名的小圓圈會在這些大圓圈內。現在我想要將這些小圓圈拖放到大圓圈中。大顆粒不應該移動，請幫助我。連我都在動作

package 
{ 
    import flash.display.Sprite; 
    import flash.events.MouseEvent; 
    import flash.text.engine.GroupElement; 

    public class lastWork extends Sprite 
    { 
     public function lastWork() 
     { 
      drawBigCircles(200,100,100); 
      drawBigCircles(400,280,100); 
     drawCircles(190,90,15); 
     drawCircles(180,130,15); 
     drawCircles(150,70,15); 
     drawCircles(400,240,20); 

     } 
     public function drawBigCircles(x:Number,y:Number,radius:Number):void{ 
      var circle:Sprite=new Sprite(); 
      circle.graphics.beginFill(0xFFCC00,1); 
      circle.graphics.lineStyle(1,0x666666); 


      circle.graphics.drawCircle(x,y,radius); 
      this.addChild(circle); 
      addChild(circle); 
     } 
     public function drawCircles(x:Number,y:Number,radius:Number):void 
     { 
      var group:GroupElement =new GroupElement(); 

      var circle:Sprite=new Sprite(); 
      circle.graphics.beginFill(0xFFCC00,1); 
      circle.graphics.lineStyle(1,0x666666); 


      circle.graphics.drawCircle(x,y,radius); 
      this.addChild(circle); 
      addChild(circle); 
      circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) 

      function mouseDown(event:MouseEvent):void 
      { 
       circle.startDrag(); 
      } 
      circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased); 

      function mouseReleased(event:MouseEvent):void 
      { 
       circle.stopDrag(); 
       trace(circle.dropTarget.name); 
      } 
     } 

    } 
} 

嘗試這種代碼，但在這方面，我想大圈不能移動和小圓圈應該只是dragged.If你也可以告訴我怎麼把任何文本在這些小circles.Small其中的文字圈應該拖放到其他大圈。

Answer 1

爲什麼要打擾2個容器？只要創建裏面一個自定義組件並拖動圓（下面的代碼甚至還可以在移動Flex項目視圖）：

myApp.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/mx" 
    xmlns:comps="*"> 
    <comps:MyCircle width="100%" height="100%"/> 
</s:Application> 

MyCircle.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<mx:UIComponent 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="100%" height="100%"> 

    <fx:Script> 
     <![CDATA[ 
      import flash.filters.*; 

      public static const SHADOW:Array = [ new DropShadowFilter(10, 80, 0x000000, 0.5, 32, 32, 1, 1, false, false, false) ]; 
      private var dX:Number, dY:Number; 
      private var circle:Shape = new Shape(); 

      override protected function createChildren():void { 
       super.createChildren(); 

       circle.graphics.beginFill(0xFF0000); 
       circle.graphics.drawCircle(0, 0, 20); 
       addChild(circle); 

       addEventListener(MouseEvent.MOUSE_DOWN, handleDown); 
      } 

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
       super.updateDisplayList(unscaledWidth, unscaledHeight); 

       circle.x = unscaledWidth/2; 
       circle.y = unscaledHeight/2; 
      } 

      private function handleDown(event:MouseEvent):void { 
       dX = circle.x - stage.mouseX; 
       dY = circle.y - stage.mouseY; 
       circle.scaleX = circle.scaleY = 1.5; 
       circle.filters = SHADOW; 
       //startDrag(); 
       stage.addEventListener(MouseEvent.MOUSE_MOVE, handleDrag); 
       stage.addEventListener(MouseEvent.MOUSE_UP, handleUp); 
      } 

      private function handleDrag(event:MouseEvent):void { 
       circle.x = stage.mouseX + dX; 
       circle.y = stage.mouseY + dY; 
       event.updateAfterEvent(); 
      } 

      private function handleUp(event:MouseEvent):void { 
       circle.filters = null; 
       circle.scaleX = circle.scaleY = 1; 
       //stopDrag(); 
       stage.removeEventListener(MouseEvent.MOUSE_MOVE, handleDrag); 
       stage.removeEventListener(MouseEvent.MOUSE_UP, handleUp); 
      } 

     ]]> 
    </fx:Script> 
</mx:UIComponent>