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(value,'value'); 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); DragManager.acceptDragDrop(dropTarget); } private function dragExitHandler(event:DragEvent):void { var dropTarget:Box=event.currentTarget as Box; revertBoxBorder(); } 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; addChild(imgView); 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; } else { 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: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'> </mx:Box>; 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.