Manually adding drag-and-drop support

<?xml version="1.0"?>
<!-- dragdrop\simpleDGToDGAlert.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="700" height="250" 
    borderStyle="solid" 
    creationComplete="initApp();">

    <mx:Script>
        <![CDATA[        
            import mx.events.DragEvent; 
            import mx.controls.Alert;
            
            private function initApp():void {
              srcgrid.dataProvider =  [
                {Artist:'Carole King', Album:'Tapestry', Price:11.99},
                {Artist:'Paul Simon', Album:'Graceland', Price:10.99},
                {Artist:'Original Cast', Album:'Camelot', Price:12.99},
                {Artist:'The Beatles', Album:'The White Album', Price:11.99}
              ];
                
                destgrid.dataProvider =[];    
            }

            // Define the event listener.
            public function dragDropHandler(event:DragEvent):void {    
                // Access dragged data as an Array 
                // in case multiple items were selected.
                var dragObj:Array=
                    event.dragSource.dataForFormat("items") as Array; 

                // Get the Artist for all dragged albums.
                var artistList:String='';
                for (var i:Number = 0; i < dragObj.length; i++) { 
                    artistList+='Artist: ' + dragObj[i].Artist + '\n';
                }
                
                Alert.show(artistList);                
            }           
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:VBox>
            <mx:Label text="Available Albums"/>
            <mx:DataGrid id="srcgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true">                
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"  />
                    <mx:DataGridColumn dataField="Album" />
                    <mx:DataGridColumn dataField="Price" />
                </mx:columns>    
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox>
            <mx:Label text="Buy These Albums"/>
            <mx:DataGrid id="destgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true" 
                dragDrop="dragDropHandler(event);">                
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"  />
                    <mx:DataGridColumn dataField="Album" />
                    <mx:DataGridColumn dataField="Price" />
                </mx:columns>    
            </mx:DataGrid>
        </mx:VBox>
    </mx:HBox>
</mx:Application>

<?xml version="1.0"?>
<!-- dragdrop\DandDCanvas.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
    <![CDATA[
        import mx.core.DragSource;
        import mx.managers.DragManager;
        import mx.events.*;
        import mx.containers.Canvas;

        // Called when the user clicks the mouse on either colored canvas.
        // Initializes the drag.
        private function dragIt(event:MouseEvent, text:String, 
            format:String):void {
            
            // Get the drag initiator component from the event object.
            var dragInitiator:Canvas=Canvas(event.currentTarget);
            // Create a DragSource object.
            var ds:DragSource = new DragSource();
            // Add the data to the object.
            ds.addData(text, format);

            // Create a Canvas container to use as the drag proxy.
            // You must specify a size for the proxy image, 
            // or else it will not appear.
            var canvasProxy:Canvas = new Canvas();
            canvasProxy.width=30;
            canvasProxy.height=30;
            canvasProxy.setStyle('backgroundColor',
                dragInitiator.getStyle('backgroundColor'));

            // Call the DragManager doDrag() method to start the drag. 
            // For information on this method, see 
            // the "Initiating the drag" section.
            DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
        }

        // Called if the user dragged a proxy onto the drop target canvas.
        private function doDragEnter(event:DragEvent):void {
            // Get the drop target component from the event object.
            var dropTarget:Canvas=Canvas(event.currentTarget);

            // Accept the drag only if the user is dragging data 
            // identified by the 'color' format value.
            if (event.dragSource.hasFormat('color')) {
                DragManager.acceptDragDrop(dropTarget);
            }
        }
                
        // Called if the target accepts the dragged object and the user 
        // releases the mouse button while over the canvas. 
        // Handles the dragDrop event for the List control.
        private function doDragDrop(event:DragEvent):void {
            // Get the data identified by the color format 
            // from the drag source.
            var data:Object = event.dragSource.dataForFormat('color');
            // Set the canvas color.
            myCanvas.setStyle("backgroundColor", data);
        }
    
    ]]>
    </mx:Script>

    <!-- A horizontal box with red and green canvases the user can drag -->
    <mx:HBox>
        <mx:Canvas 
            width="30" height="30" 
            backgroundColor="red" 
            borderStyle="solid" 
            mouseMove="dragIt(event, 'red', 'color');"/>
        <mx:Canvas 
            width="30" height="30" 
            backgroundColor="green" 
            borderStyle="solid" 
            mouseMove="dragIt(event, 'green', 'color');"/>
    </mx:HBox>

    <mx:Label text="Drag the item into this canvas"/>

    <!-- Handles dragEnter and dragDrop events to allow dropping -->
    <mx:Canvas id="myCanvas" 
        width="100" height="100" 
        backgroundColor="#FFFFFF" 
        borderStyle="solid" 
        dragEnter="doDragEnter(event);" 
        dragDrop="doDragDrop(event);"/>
</mx:Application>