Manually adding drag-and-drop support

원문 : http://www.adobe.com/livedocs/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000960.html

Manually adding drag-and-drop support

To support drag-and-drop operations with non-list-based controls, or with containers, you must explicitly add support by using a series of special classes and events.

Example: Simple drag-and-drop operation

The following example lets users color a canvas by dropping either of two sample colors onto it. It shows the basic elements of a drag-and-drop operation. The following sections describe these elements in greater detail.

<?xml version="1.0"?>
<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 backgroundColor="red" borderStyle="solid" width="30"
            height="30" mouseMove="dragIt(event, 'red', 'color');"/>
        <mx:Canvas backgroundColor="green" borderStyle="solid" width="30"
            height="30" 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" backgroundColor="#FFFFFF" borderStyle="solid" 
        width="100" height="100" 
        dragEnter="doDragEnter(event);" dragDrop="doDragDrop(event);"/>
</mx:Application>