3 Replies Latest reply on Nov 22, 2009 11:24 AM by harihisu

    Triggering pop-up event through drag & drop?


      Hi everyone, I'm a newly registered member of this forum.

      I've roughly browsed though this forum to seek a solution for my problem, but I can't seem to find a suitable solution (perhaps i should continue looking).



      Anyway, I'm facing some technical challenges in flex as I'm relatively new to it.

      I'm trying to create a web application, where users use drag & drop to input information.
      I visualize this process:

      • User selects icon from a list
      • User drags the icon onto target area
      • User releases icon over target area
      • Pop-up appears with a form for users to input information.
      • Users input information and submits
      • Information is stored in the database.


      Present knowledge:

      Because I'm new to Flex, I tried to break this down and learn by components:

      I'm able to:

      • Create a drag & drop effect
      • Create connection to database using HttpService


      Main Problem:

      I'm able to use the drag and drop functionality but I cannot trigger a pop-up event when the icon is dropped onto the target area.




      Sorry if the problem seems a little insignificant due to my lack in knowledge.

      I'm just a student trying to learn. Hope that someone can help me out here, or provide me with relevant links to learning resources.


      Thanks in advance,


        • 1. Re: Triggering pop-up event through drag & drop?

          I think you can listen to DragEvent.DRAG_COMPLETE from the initator or DragEvent.DRAG_DROP from the target to do it.

          1 person found this helpful
          • 2. Re: Triggering pop-up event through drag & drop?
            JordTheFlexBeginner Level 1


            thanks so much for replying, but I would really appreciate a little bit more help.


            I vaguely understand the concepts of DragEvent.DRAG_DROP, but I'm not really familiar with the syntax of how to cause allow a pop-up to appear.


            This is how my script look like:

                        import mx.events.DragEvent;
                        import mx.containers.Box;
                        import mx.managers.DragManager;
                        import mx.core.DragSource;
                        import mx.collections.ArrayCollection;
                        import mx.rpc.events.ResultEvent;


                        public var personalAsset:Class;


                        public var investment:Class;
                        private var iconValue:uint;          


                        private function iconDrag (event:MouseEvent, value:uint):void
                                var dragInitiator:Image = event.currentTarget as Image;
                                var dragSource:DragSource = new DragSource();
                                dragSource.addData(value, 'value');
                                var dragProxy:Image = new Image();
                                dragProxy.source = event.currentTarget.source;
                                DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
                        private function dragOver(event:DragEvent):void
                                var dropTarget:Box=event.currentTarget as Box;
                                if (event.dragSource.hasFormat('value'))
                                        dropTarget.setStyle("borderThickness", 5);


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


                        private function dragAccept(event:DragEvent):void
                                var value:uint = event.dragSource.dataForFormat('value') as uint;
                                The trigger for the Pop-up should be placed here.

                        private function revertTarget():void
                            fStatement.setStyle("borderThickness", 1);


            I'm not sure whether I'm correct to state (in bold, italic, & underline) above that the event trigger for the pop-up should be within that particular function.


            The difficulty I'm facing now is that the (structure of the) popup should be written in MXML and yet I have to place them in the ActionScript.

            (I sense that I have a fundamental misconception of how this works,so please correct me to the best of your knowledge.)


            I would greatly appreciate it if anyone is able to provide me with an example/sample of how this should be done.



            With Thanks,


            • 3. Re: Triggering pop-up event through drag & drop?
              harihisu Level 2

              So, your problem now is open a popup.

              You can make your own popup display object (usually a seperate mxml file), then call PopUpManager.createPopUp function to show your popup. Remember to store the new popup window to refer or remove it in the future.


              var popupWindow:YourPopUpClass = PopUpManager.createPopUp( this, YourPopUpClass );
              1 person found this helpful