Drag and Drop: From List Control to TextInput(Non-List) Control in Flex.

The list based controls in Flex has the built in support for the drag and drop.So to support the drag and drop operations for the non-list based components(here TextInput) we must handle the drag and drop events.
Go through the classes involded in the drag and drop operations,drag and drop events for a drag initiator,drag and drop events for a drop target to explicitly handle the drag and drop and to fully understand the drag and drop operations functionality.

For now enjoy the below demo and code.

 Run demo.

Download source code.

About these ads

19 Responses to Drag and Drop: From List Control to TextInput(Non-List) Control in Flex.

  1. Rick says:

    Thank you very much for your post on Drag and Drop:List Control to TextInput. I have adapted the drop handler to build buttons on a panel from an array, and am continuing to play. I am a novice to Flex and your generosity is much appreciated.

    Rick

  2. [...] Drag and Drop: From List Control to TextInput(Non-List) Control in Flex. [...]

  3. Ronnie says:

    Hi Kumar,
    Im dragging buttons from a list and dropping onto a canvas. But when i drag and drop, i want to only copies of the button to be dropped onto the canvas and the buttons to stay in the list as such. But rite now when i drag and drop, the button vanishes from the list and appears on the canvas. How do i copy the buttons. Each of my button in the list have an icon embedded on them.

    • kumargandhi says:

      Hi Ronnie,

      There’s a flag to toggle with copy and move, its “dragMoveEnabled”, you can set it to false for copy only on List Control.

      regards,
      kumar.

  4. Ronnie says:

    Thx for the prompt reply Kumar….
    Its really hard to get reply’s in such short notice. Thx a lot…
    I couldnt find where i have to set that dragMoveEnabled flag. Could you plz tel me wer to set it?
    I have the buttons inside accordion as horizontal list. Each button has an event listener for draggin. Where do i have to set this flag?

    Thx in advance.

  5. Ronnie says:

    The buttons have Mouse_Down event listeners wer i enable the buttons to be dragged.

    Code:

    this.recBut.addEventListener(MouseEvent.MOUSE_DOWN, dragButton);

    public function dragButton(e:MouseEvent):void
    {

    if(e.buttonDown)
    {
    var button:Button = e.currentTarget as Button;

    var dragSource:DragSource = new DragSource();
    dragSource.addData(button, ‘button’);
    DragManager.doDrag(button, dragSource, e);
    }
    }

    • kumargandhi says:

      Hi,

      you got to set it on List control, its a property of List control.

      regards,
      kumar.

      • Ronnie says:

        Thx Kumar,
        Now i have actually arranged the buttons as shown below. And i tried using them in a list but it doesnt seem to work. Any suggestions????

  6. Ronnie says:

    Sorry my mxml code doesnt seem to be appearing on the blog. Actually i have an accordion inside which i have a HBox which contains the buttons. Since HBox isnt a list based control i cant have dragMoveEnabled property. I have tried using Horizontallist and plain list control. But my app is a lil complicated, since each of the buttons have event listeners. Your suggestions are welcome. Thanks :)

  7. Ronnie says:

    Hi kumar,
    Cant i simply have a button which i can drag and drop?
    I wanna have the button in a component and drop it in a canvas. So after dropping, the button shud be in both the initial component as well as the canvas.

  8. Shuja says:

    Hi Kumar,

    thanks for the code, this is exactly what i’ve been looking.

    in my case the data is not an arraycollection but an XML. so how do i access the XML element.

    Also both the list and textinput are in 2 separate mxml files.

    any help will be greatly appreciated.

    Thanks in advance.

    • kumargandhi says:

      Hi,

      You would access it the same way, there’s no diff, event.dragSource.dataForFormat(“items”) will have your data as an array, so you just get your data from it.

      And also it does not matter where list and textinput is, it will work as you set the dragEnabled=”true” for list and write handlers for texinput.

      regards,
      kumar.

      • Shuja says:

        Hi Kumar,

        Thanks for the reply.

        The XML data was used as a HierarchicalData as a datasource so it was not working with “items” property.
        Instead I used the “treeDataGridItems” property and it worked for me –
        var itemsArray:Array = event.dragSource.dataForFormat(“treeDataGridItems”) as Array;

        Thanks,
        Shuja.

  9. krishna says:

    Hi kumar,

    I need drag the tree items(in my case list of data like db tables) to some panel or editor and their i need to give links between the two items(like relation between two tables). I tried this but not get. Please help me.

    thank you,
    Krishna

  10. mario dcunha says:

    I tried the same thing as you said here… im using Flex 4… even im kinda novice…
    nothing’s working. its dragging from the List (array collections) but its not dropping in the textInput

  11. mario dcunha says:

    its even accepting the drop but not showing anything. I have ignored the “items” code… let it accept anything.. and it does.

    But its just not showing up! :| any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: