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.
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
Hi,
your welcome and thank you., i am just sharing my knowledge,and i am glad it helped you.
regards,
kumar.
[...] Drag and Drop: From List Control to TextInput(Non-List) Control in Flex. [...]
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.
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.
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.
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);
}
}
Hi,
you got to set it on List control, its a property of List control.
regards,
kumar.
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????
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
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.
[...] http://flexonblog.wordpress.com/2009/03/02/drag-and-drop-from-list-control-to-textinputnon-list-cont… [...]
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.
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.
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.
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
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
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?