How can I drop the text from the list to the specific textinput position (under cursor)?

Question

I know how to drag from list and drop into the textinput control. But I don't know how to insert the text in textinput under the position of the cursor. For example, I have text qwerty in textinput. And I need to drop the word asdf in the textinput. As a result I want to get text qweasdfrty or qasdfwerty , or whatever I want depending on the cursor position.

Here is the simplified code of what I already have:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                layout="absolute"
                minWidth="955"
                minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private function init():void
            {
                horList.dataProvider=new ArrayCollection(["Reading", "Television", "Movies"]);
            }

            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("items"))
                    DragManager.acceptDragDrop(TextInput(event.currentTarget));
            }

            private function dragOverHandler(event:DragEvent):void
            {
                if (event.dragSource.hasFormat("items"))
                    DragManager.showFeedback(DragManager.COPY);
            }

            private function dragDropHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("items"))
                {
                    var draggedText:Array = event.dragSource.dataForFormat("items") as Array;

                    var textInput : TextInput = TextInput(event.currentTarget);

                    // here i want to insert the text from (draggedText[0] as String) into textInput

                }                   
            }
        ]]>
    </fx:Script>
    <mx:HorizontalList id="horList"
                       x="10"
                       y="10"
                       width="625"
                       dragEnabled="true"
                       creationComplete="init()">
    </mx:HorizontalList>
    <mx:TextInput id="destTextInput"
                  x="100"
                  y="117"
                  dragEnter="dragEnterHandler(event);"
                  dragOver="dragOverHandler(event);"
                  dragDrop="dragDropHandler(event);"/>

</mx:Application>

Is there any ways to achieve this?

Answer 1

Here is a full example. It required access to the mx_internal namespace unfortunately but should hold up fine. The reason it had to use mx_internal is to get access to the IUITextField reference.

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.core.IUITextField;

        //Note use of mx_internal namespace
        import mx.core.mx_internal;
        use namespace mx_internal;

        private function init():void
        {
            horList.dataProvider=new ArrayCollection(["Reading", "Television", "Movies"]);
        }

        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.events.DragEvent;
        import flash.events.MouseEvent;

        private function dragEnterHandler(event:DragEvent):void {
            if (event.dragSource.hasFormat("items"))
                DragManager.acceptDragDrop(TextInput(event.currentTarget));
        }

        private function dragOverHandler(event:DragEvent):void
        {
            if (event.dragSource.hasFormat("items"))
                DragManager.showFeedback(DragManager.COPY);
        }

        private function dragDropHandler(event:DragEvent):void {
            if (event.dragSource.hasFormat("items"))
            {
                var draggedText:Array = event.dragSource.dataForFormat("items") as Array;

                var textInput : TextInput = TextInput(event.currentTarget);

                // here i want to insert the text from (draggedText[0] as String) into textInput

                //Using mx_internal namespace to gain access to internal textfield
                var tf:IUITextField = textInput.getTextField();
                var charIndex:int = tf.getCharIndexAtPoint(textInput.contentMouseX, textInput.contentMouseY);

                //dropped after end of text
                if(charIndex == -1 && mouseX > tf.textWidth)
                {
                    tf.appendText(draggedText[0]);
                }
                //Dropped at beginning of field (only happens when it is empty)
                else if(charIndex == -1 && mouseX < tf.textWidth)
                {
                    tf.text = draggedText[0];
                }
                //dropped inline to text
                else
                {
                    tf.replaceText(charIndex, charIndex, draggedText[0]);
                }
            }                   
        }
    ]]>
</fx:Script>
<mx:HorizontalList id="horList"
                   x="10"
                   y="10"
                   width="625"
                   dragEnabled="true"
                   creationComplete="init()">
</mx:HorizontalList>
<mx:TextInput id="destTextInput"
              x="100"
              y="117"
              dragEnter="dragEnterHandler(event);"
              dragOver="dragOverHandler(event);"
              dragDrop="dragDropHandler(event);"/>