<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#ffffff, #ffffff]" width="500" height="300" creationComplete="init()">
    
    <mx:Script>
        <![CDATA[
        
            [Bindable]
            public var prodToAdd:ArrayCollection;
            
            //array of product numbers
            private var aProd:Array;
            
            private var productArray:Array;

            public var productsList:String;
            
            private function init():void{
                //constructor
            }
            private function getList():void{
                prodToAdd = productsToAdd.dataProvider as ArrayCollection;
                callJS();
            }
            private function removeItemAndGet():void{
                var i:int = productsToAdd.selectedIndex;
                prodToAdd = productsToAdd.dataProvider as ArrayCollection;
                prodToAdd.removeItemAt(i);
                callJS();
            }
            
            //used in Product.mxml
            public function callJS():void{
                var i:int;
                var tempArrayToString:String;
                
                if(prodToAdd.length){
                    aProd = new Array();
                    for(i = 0; i < prodToAdd.length; i++){
                        aProd.push(prodToAdd.getItemAt(i).productNumber);
                    }
                    tempArrayToString = aProd.toString();
                    ExternalInterface.call("getList",tempArrayToString);
                }else{
                    aProd = new Array();
                    tempArrayToString = aProd.toString();
                    ExternalInterface.call("getList",tempArrayToString);
                }
            }
            private function getProducts(event:Event):void{
                productArray = new Array();
                var i:int;
                
                if(productList.selectedItems.length){
                    for (i = 0;i < productList.selectedItems.length; i++){
                        productArray.push(productList.selectedItems[i].productNumber);
                    }
                    //List of productNumbers
                    //trace('productArray : ' + productArray);
                }
                
                productList = productArray.toString();
            }
        ]]>
    </mx:Script>
    
    <mx:ArrayCollection id="myACOne">
        <mx:source>
            <mx:Object productName="Carrots" productNumber="12345"/>
            <mx:Object productName="Beans" productNumber="12346"/>
            <mx:Object productName="Grapes" productNumber="12347"/>
        </mx:source>
    </mx:ArrayCollection>
    
    <mx:HBox width="100%" height="100%">
        <mx:DataGrid id="productList" dragComplete="getList()" dragDrop="getList()" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" click="getProducts(event)" allowMultipleSelection="true"
         dataProvider="{myACOne}" width="100%" height="100%"/>
        
        <mx:VBox height="100%" verticalAlign="middle" horizontalAlign="center">
            <mx:Text text="Drag and Drop Products" width="109" textAlign="center"/>
        </mx:VBox>
        
        <mx:DataGrid id="productsToAdd" dragComplete="removeItemAndGet()" dataProvider="{prodToAdd}"
            dropEnabled="true" dragEnabled="true"
            height="100%" width="100%">
            <mx:columns>
                <mx:DataGridColumn dataField="productName" width="150" headerText="Description"/>
                <mx:DataGridColumn dataField="productNumber" headerText="Number"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>
    
</mx:Application>