如何在flex项目中将圆圈从一个容器拖动到另一个容器

时间:2012-01-13 09:14:22

标签: actionscript-3 flex flex4.5

我正在创建一个flex Air项目,因此将运行mxml文件 我在一侧有一个大圆圈,另一侧有圆圈。

现在如何将任何圆圈从任何大圆圈拖到另一侧。或者它可能像任何两个有圆圈的容器,那么如何拖放圆圈?

对于一个圆圈,我可以拖放。但我想在左手边有一个大圆圈,在右手边有一个大圆圈。带有类名的小圆圈将在这些大圆圈中。现在我想要将这些小圆圈拖放到大圆圈中。大圆角不应该移动。请帮帮我。即使我在actionscript

中尝试过这段代码
    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);
            }
        }

    }
}

但是在这个我想要大圆圈不应该移动,小圆圈应该只被拖动。如果你也可以告诉我如何在这些小圆圈中放置任何文字。带有文字的小圆圈应该拖放到其他大圈子。

1 个答案:

答案 0 :(得分:0)

为什么要打扰2个容器?只需创建一个自定义组件并在其中拖动圆圈(下面的代码甚至适用于带有View的移动Flex项目):

enter code here

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>