Drag and drop data from datagrid to textInput with flex.

Question

Hi,
  Cay please help me out on this problem..
  I have a datagid with some values..I have a textInput on the UI..
There is one "+" button on the UI..when i click on that button it will add one more TextInput box to the UI below the first TextInput..Like thiseverytime  when you click on the "+" button it will add one more TextInput to the UI just below the previous one..
Now i want to drag the values from datagrid to Textinput boxes..User may drag two or more vlaues to each textInput upon his requirement..
How can i drag ...could you please help me out on thi issue....
I am not able to drag the values to TextInputs:
Here is my code:::Could anyone please help me...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
<mx:Script>
            <![CDATA[
                import mx.containers.HBox;
                import mx.controls.Alert;
                import mx.managers.PopUpManager;
            //    import Components.testPopUpWindow;
                import mx.core.UIComponent;
                import mx.containers.TitleWindow;
                import mx.core.DragSource;
               // import mx.core.IUIComponent;
                import mx.managers.DragManager;
                import mx.events.DragEvent;
                import mx.controls.Alert;
                import mx.controls.Text;
                import flash.geom.Point;
             import mx.collections.ArrayCollection;
             [Bindable]
            private var dpFlat:ArrayCollection = new ArrayCollection([
                                 {JobName:"A"},
                                {JobName:"B"}, 
                                {JobName:"C"},
                                {JobName:"D"}, 
                                {JobName:"E"},
                                {JobName:"F"},
                                {JobName:"G"}]);
              private function box_addChild():void
                    var box:HBox = new HBox();
                       box.width=716;
                       var descriptionTextInput:TextInput = new TextInput();
                       var strButton:Button=new Button();
                      strButton.label="Submit";
                     descriptionTextInput.width=174;
                     descriptionTextInput.height=58;
                     box.addChild(descriptionTextInput);
                    /*     box.addChild(strButton); */
                    //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                     interactiveQuestionsVBoxID.addChild(box);
      public function init():void
        this.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
        this.addEventListener( DragEvent.DRAG_DROP, handleDrop );
      public function acceptDrop( dragEvent:DragEvent ):void
        if (dragEvent.dragSource.hasFormat("items"))
          DragManager.showFeedback( DragManager.COPY );
          DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
      var pt:Point;
      public function handleDrop( dragEvent:DragEvent ):void
       // var dragInitiator:UIComponent = dragEvent.dragInitiator;
        //var dropTarget:UIComponent = dragEvent.currentTarget as UIComponent;
        var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
        /* pt = new Point(dragEvent.localX, dragEvent.localY);
        pt = dragEvent.target.localToContent(pt);
        var img:TextInput = new TextInput();
          img.x=dragEvent.localX;   img.y=dragEvent.localY;
       // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
          //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
        img.width = 50;
        img.height=50;
        img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
        img.text=items[0].JobName.toString();
         img.buttonMode = true;
         img.mouseChildren = false;
          TextInput(event.currentTarget).text=itemsArray[0].label;
         var itemsArray:Array = event.dragSource.dataForFormat("items") as Array; */
                TextInput(dragEvent.currentTarget).text=items[0].label;
         public function beginDrag( mouseEvent:MouseEvent ):void
        var dragInitiator:TextInput = mouseEvent.currentTarget as TextInput;
        var dragSource:DragSource = new DragSource();
       // dsource.addData(this, 'node');
        dragSource.addData(this.mouseX, 'mouseX');
        dragSource.addData(this.mouseY, 'mouseY');
        //parent.addChild(dragImg);
        //dragSource.addData(mouseEvent.currentTarget.text, "txt");
        try{
            var dragProxy:TextInput=new TextInput();
            dragProxy.text = mouseEvent.currentTarget.text;
               // Alert.show("Text isss"+dragProxy.text);
               dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
            // ask the DragManger to begin the drag
            DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
        catch(e){}   
              ]]>
    </mx:Script>
<mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
<mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
<!--<mx:Label id="lbl"   text="Job Name" width="195" height="28"  x="0" y="0" fontWeight="bold"/>-->
<mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
    <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
    <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
    <!--<mx:Button label="-" width="71" fontWeight="bold" click="box_deleteChild();"/>-->
</mx:Box>
<mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
                 <!--<mx:Box id="boxID" direction="horizontal" width="268" height="58">-->
                     <mx:TextInput id="t1" width="174" dragDrop="handleDrop(event)"    height="58"/>
                     <!--<mx:Button label="Submit" id="b1" />-->
              <!--    </mx:Box>-->
</mx:VBox>
        </mx:Canvas>
</mx:Application>

Answer 1

Hi Satya,
I have done it for you ...please copy the below whole code and try to run the application. You can see the application working for you.
You have done two mistakes --- you have added the event listeners on this object........but this refers to current object(i.e; your main application file but not TextInput).
So you need to addEventListeners for your textinput "t1" but not to this...
If you add the listeners on this then in your "acceptDrop" and "handleDrop" functions you will get the "dragEvent.currentTarget" as your main app but not TextInput(Since you have added listeners to "this "). If you addListeners on t1 then its correct.
Also you need to add the eventListeners for the newly added textboxes as I done in "box_addChild" function in below code.
Also in the handleDrop function the line of code where you are assigning the text is wrong ......it should be the below code...
TextInput(dragEvent.currentTarget).text=items[0].JobName;
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   width="100%"  height="100%" creationComplete="init()">
<mx:Script> 
  <![CDATA[
                import mx.containers.HBox;
                import mx.controls.Alert;
                import mx.managers.PopUpManager;
            //    import Components.testPopUpWindow;
                import mx.core.UIComponent;
                import mx.containers.TitleWindow;
                import mx.core.DragSource;
               // import mx.core.IUIComponent;
                import mx.managers.DragManager;
                import mx.events.DragEvent;
                import mx.controls.Alert;
                import mx.controls.Text;
                import flash.geom.Point;
           import mx.collections.ArrayCollection;
           [Bindable]
           private var dpFlat:ArrayCollection = new ArrayCollection([
                                 {JobName:"A"},
                                {JobName:"B"}, 
                                {JobName:"C"},
                                {JobName:"D"}, 
                                {JobName:"E"},
                                {JobName:"F"},
                                {JobName:"G"}]);
            private function box_addChild():void
                var box:HBox = new HBox();
                box.width=716;
                var descriptionTextInput:TextInput = new TextInput();
                var strButton:Button=new Button();
                strButton.label="Submit";
                descriptionTextInput.width=174;
                descriptionTextInput.height=58;
                descriptionTextInput.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
       descriptionTextInput.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                 box.addChild(descriptionTextInput);
                /*     box.addChild(strButton); */
                //    strButton.addEventListener(MouseEvent.CLICK,submitButtonClicked);
                 interactiveQuestionsVBoxID.addChild(box);
public function init():void
     t1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
     t1.addEventListener( DragEvent.DRAG_DROP, handleDrop );
      public function acceptDrop( dragEvent:DragEvent ):void
        if (dragEvent.dragSource.hasFormat("items"))
          DragManager.showFeedback( DragManager.COPY );
          DragManager.acceptDragDrop(TextInput(dragEvent.currentTarget));
      private var pt:Point;
      public function handleDrop( dragEvent:DragEvent ):void
       // var dragInitiator:UIComponent = dragEvent.dragInitiator;
        //var dropTarget:UIComponent = dragEvent.currentTarget as UIComponent;
        var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
        /* pt = new Point(dragEvent.localX, dragEvent.localY);
        pt = dragEvent.target.localToContent(pt);
        var img:TextInput = new TextInput();
          img.x=dragEvent.localX;   img.y=dragEvent.localY;
       // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
          //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
        img.width = 50;
        img.height=50;
        img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
        img.text=items[0].JobName.toString();
         img.buttonMode = true;
         img.mouseChildren = false;
          TextInput(event.currentTarget).text=itemsArray[0].label;
         var itemsArray:Array = event.dragSource.dataForFormat("items") as Array; */
          var currTarget:* = dragEvent.currentTarget;
          //interactiveQuestionsVBoxID = currTarget.getChildByName("interactiveQuestionsVBoxID");
            TextInput(dragEvent.currentTarget).text=items[0].JobName;
      public function beginDrag( mouseEvent:MouseEvent ):void
        var dragInitiator:TextInput = mouseEvent.currentTarget as TextInput;
        var dragSource:DragSource = new DragSource();
       // dsource.addData(this, 'node');
        dragSource.addData(this.mouseX, 'mouseX');
        dragSource.addData(this.mouseY, 'mouseY');
        //parent.addChild(dragImg);
        //dragSource.addData(mouseEvent.currentTarget.text, "txt");
        try{
            var dragProxy:TextInput=new TextInput();
            dragProxy.text = mouseEvent.currentTarget.text;
               // Alert.show("Text isss"+dragProxy.text);
               dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget .height)
            // ask the DragManger to begin the drag
            DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );
        catch(e:Error){}   
     ]]>
</mx:Script>
    <mx:Canvas id="c1" width="100%" height="100%" y="10" x="10" >
  <mx:DataGrid id="d1" dataProvider="{dpFlat}"  x="10" y="119" dragEnabled="true"   dragMoveEnabled="true"  height="229" width="176"/>
  <mx:Box id="questionLabelMode" direction="horizontal" width="270.5" height="24" y="76" x="211">
      <mx:Label name="Answer" width="173" text="Answer" fontWeight="bold"/>
      <mx:Button label="+" width="70" click="box_addChild();" fontWeight="normal"/>
  </mx:Box>
  <mx:VBox id="interactiveQuestionsVBoxID" y="119"  height="100%" width="270.5" horizontalScrollPolicy="off" x="211">
    <mx:TextInput id="t1" width="174" dragDrop="handleDrop(event)" height="58"/>                    
  </mx:VBox>
</mx:Canvas>
</mx:Application>
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari