如何将圆形从一个容器拖到另一个容器中的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>