In Flex, how to drag a component into a column of DataGrid (not the whole DataGrid row)?

Question

Hi guys,

I have a custom component:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var label:String = "don't know";
            [Bindable]
            public var imageName:String = "x.gif";
        ]]>
    </fx:Script>
    <s:HGroup paddingLeft="8" paddingTop="8" paddingRight="8" paddingBottom="8">
        <mx:Image id="img" source="assets/{imageName}" />
        <s:Label text="{label}"/>
    </s:HGroup>
</s:Group>

and a custom render, which will be used in my DataGrid:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true" xmlns:components="components.*">
    <s:VGroup>
        <components:Person label="{dataGridListData.label}">
        </components:Person>
    </s:VGroup>
</s:MXDataGridItemRenderer>

This is my application:

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

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.Image;
            import mx.rpc.events.ResultEvent;
            import mx.utils.ArrayUtil;

        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XMLList id="employees">
            <employee>
                <name>Christina Coenraets</name>
                <phone>555-219-2270</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/001.png</image>
            </employee>
            <employee>
                <name>Joanne Wall</name>
                <phone>555-219-2012</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/002.png</image>
            </employee>
            <employee>
                <name>Maurice Smith</name>
                <phone>555-219-2012</phone>
                <email>[email protected]</email>
                <active>false</active>
                <image>assets/003.png</image>
            </employee>
            <employee>
                <name>Mary Jones</name>
                <phone>555-219-2000</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/004.png</image>
            </employee>
        </fx:XMLList>
    </fx:Declarations>
    <s:HGroup>

        <mx:DataGrid dataProvider="{employees}" width="100%" dropEnabled="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Employee Name" dataField="name"/>
                <mx:DataGridColumn headerText="Email" dataField="email"/>
                <mx:DataGridColumn headerText="Image" dataField="image" itemRenderer="renderers.render1"/>
            </mx:columns>
        </mx:DataGrid>

        <s:List dragEnabled="true" dragMoveEnabled="false">
            <s:dataProvider>
                <s:ArrayCollection>
                    <fx:String>aaa</fx:String>
                    <fx:String>bbb</fx:String>
                    <fx:String>ccc</fx:String>
                    <fx:String>ddd</fx:String>
                </s:ArrayCollection>
            </s:dataProvider>
        </s:List>
    </s:HGroup>

</s:Application>

Now what I want to do is let the user drag one or more item from the left List component and drop it at the third column of the DataGrid, then using the dragged data to create another <components:Person /> object. So in the final result, maybe the first line of the DataGrid contains just one <components:Person /> object at the third column, the second line contains two <components:Person /> object at the third column and so on.

Can this be implemented in Flex? How? Great thanks.