Drag-and-drop techniques and considerations -- Flex 2.01

This section documents miscellaneous techniques and considerations that can help you create effective drag-and-drop applications.

Subtopics

Using a container as a drop target

To use a container as a drop target, you must use the backgroundColor property of the container to set a color. Otherwise, the background color of the container is transparent, and the Drag and Drop Manager is unable to detect that the mouse pointer is on a possible drop target.

Dragging an image

In the following example, you use the <mx:Image> tag to load a draggable image into a Canvas container. In this example, the image is both the drag initiator and the drag proxy. To specify the image as the drag proxy, you specify an Image control as the drag proxy to the doDrag() method.

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

    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;
            import mx.controls.Image;
            import mx.containers.Canvas;

            //Variables used to hold the image's location
            public var xOff:Number;
            public var yOff:Number;

            // Embed icon image.
            [Embed(source='assets/globe.jpg')]
            public var globeImage:Class;

            // Drag initiator event handler, called by 
            //  the image's mouseMove event.
            private function dragMe(event:MouseEvent, img1:Image,
                format:String):void {
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(img1, format);               
                // The drag manager uses the image as the drag proxy
                // and sets the alpha to 100 (opaque),
                // so it appears to be dragged across the canvas.
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=10;
                imageProxy.width=10;
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, 0, 0, 1.00);
            }
            
            //Function called by the canvas dragEnter event; enables dropping
            private function doDragEnter(event:DragEvent):void {
                DragManager.acceptDragDrop(Canvas(event.target));
            }

            // Function called by the canvas dragDrop event; 
            // Sets the image object's position, 
            // "dropping" it in its new location.
            private function doDragDrop(event:DragEvent, 
                target1:Canvas, format:String):void {
                myimg.x = target1.mouseX - xOff
                myimg.y = target1.mouseY - yOff 
            }

            // Helper function called by the dragged image's mouseMove event,
            // as the image drags across the canvas.
            // The function updates the xOff and yOff variables to show the
            // current mouse location.  
            private function myoffset(img:Image):void {
                xOff = img.mouseX
                yOff = img.mouseY
            }       
        ]]>
    </mx:Script>
    
    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="doDragEnter(event);" 
        dragDrop="doDragDrop(event, v1, 'img');">
        
    <!-- The image is the drag initiator and the drag proxy. -->
        <mx:Image id="myimg" 
            source="@Embed(source='assets/globe.jpg')" 
            mouseMove="dragMe(event, myimg, 'img'); myoffset(myimg);"/> 
    </mx:Canvas>
</mx:Application>