Flex: How to resize and move component in runtime?

Please, anyone can guide me how to do this stuff.

I have a pannel and a box, The pannel is my component pannel(inside component pannel is eg. image, TextArea, Video) and Box is my target Box for my component creation. The user can select a component he/she want to create (dynamic creation) and drag it to target Box(drag and drop event). Then after creating the component the user can drag the component that he/she created and place anywhere on target Box and also the user can resize the component that he/she created(runtime resize).

i have this code for drag and drop and it seems this code works only on image

//-----action script-----//
        private function dragIt(event:MouseEvent, value: String, objParent: String, objName: String):void 
            var dragInitiator:Image = event.currentTarget as Image;    
            var dragSource:DragSource = new DragSource();

            dragSource.addData(objParent, 'parent');
            dragSource.addData(objName, 'objname'); 

            var dragProxy:Image = new Image();
            dragProxy.source = event.currentTarget.source;

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

        private function dragEnterHandler(event:DragEvent):void 
            var dropTarget:Box=event.currentTarget as Box;
            dropTarget.setStyle("borderThickness", 5);

        private function dragExitHandler(event:DragEvent):void
            var dropTarget:Box=event.currentTarget as Box;                

        private function revertBoxBorder():void
            targetBox.setStyle("borderThickness", 1);                

        private function dragDropHandler(event:DragEvent):void 
            var value:String = event.dragSource.dataForFormat('value') as String;
            var objParent:String = event.dragSource.dataForFormat('parent') as String;
            if(value == "mp3")
             //do something     
            else if (value == "image")
                if (objParent == "panel")
                    var imgView: Image = new Image;                 
                    imgView.x = event.stageX;
                    imgView.y = event.stageY;

                    imgView.name = String(getChildByName(imgView.name).parent.numChildren-1);     
                    imgView.addEventListener(MouseEvent.MOUSE_MOVE,  function(e:MouseEvent):void 
                    dragIt(e, value, 'box', Image(e.target).name);
                    imgView.source = ImgInsert;
                    var objName:String = event.dragSource.dataForFormat('objname') as String;
                    getChildByName(objName).parent.getChildAt(int(objName)).x = event.stageX;
                    getChildByName(objName).parent.getChildAt(int(objName)).y = event.stageY;

            else if (value == "textarea")
                //do something                  


//-----mxml code------//
<mx:Panel x="0" y="37" width="91" height="417" layout="absolute" title="Component" borderColor="#8DA5AB" color="#345860" borderStyle="outset">
    <mx:Image x="7" y="43" width="21" height="18" source="{TxtAreaInsert}" mouseMove="dragIt(event,'textarea','panel','')"/>
    <mx:Image x="36" y="43" width="21" height="18" source="{ImgInsert}" mouseMove="dragIt(event,'image','panel','')"/>
    <mx:Image x="36" y="80" width="21" height="18" source="{Mp3Insert}" mouseMove="dragIt(event,'mp3','panel','')"/>
    <mx:Image x="7" y="80" width="21" height="18" source="{VdoInsert}" mouseMove="dragIt(event,'video','panel','')"/>
<mx:Box id="targetBox" y="37" width="589" height="417" borderColor="#8CC2E8" backgroundColor="#D5DBEE"
    dragExit="dragExitHandler(event)" dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" left="99">

How to move thus non image component like TxtArea? How to resize the component inside target box? (This is like GUI of flex when creating component) Thank you..


check out Rogue-Development.com's Object Handles I've used this with pretty good success for moving / resizing components.

Also try out the Pantaste library which is a lot more sophisticated than Object Handles.

Goto http://sourceforge.net/projects/tcycomponents/ and download package and demo if you want.

Use TcyReziser component for easy moving/resizing like Delphi 2009 does!

Regards, Mauricio

Need Your Help

Javascript validation of special characters in textbox and textarea

javascript regex

I need to add validation to textbox and textarea to validate them against the following rules upon submit (ampersand and apostrophes are allowed). //,./,/.,/*,*.,~,\\

Use Arduino GSM/GPRS shield to send data to my web service

web-services arduino sensor gsm gprs

I know how to make calls and send SMSes using a GSM/GPRS shield for Arduino Uno. But I have a web service at the location http://mydomain.com/rest/receiveSensorData, and I want to send sensor data to