Using a drag image as the drag proxy.

The drag proxy is the image that follows the mouse cursor during drag and drop operations. In the event handler initiating drag and drop operations, you can specify a custom drag proxy when calling the DragManager.doDrag() method, instead of using the default drag proxy image Flex provides.

 

The doDrag() method takes a number of optional arguments related to drag proxy properties:

 

dragImage - The drag proxy image, which can be an image such as a JPEG, PNG, etc. specified by the image path such as myImage.jpg, or it can be a Flex component, where you create an instance of the control or container, configure and size it, and then pass it as an argument to the doDrag() method.

 

xOffset - The number of pixels from the upper-left corner of the drag initiator to offset the x property of the dragImage. The xOffset represents pixels from the left edge of the drag proxy to the left edge of the drag initiator. Positive numbers actually move the drag proxy to the left upon drag, and negative numbers move it to the right, so this value usually has a negative value.

 

yOffset - The number of pixels from the upper-left corner of the drag initiator to offset the y property of the dragImage. The yOffset represents pixels from the top edge of the drag proxy to the top edge of the drag initiator. Positive numbers actually move the drag proxy up upon drag, and negative numbers move it to the down, so this value usually has a negative value.

 

imageAlpha - A number specifying the alpha transparency of the drag proxy image. By default Flex uses an alpha value of 0.5. A value of 0 makes the drag proxy fully transparent and a value of 1.0 makes it fully opaque.

 

The drag proxy image will not appear unless you specify a width and height. The following example  uses a 25 by 25 pixel Canvas control as the drag proxy to represent dragging a 50 by 50 pixel Canvas drag initiator. Notice the effect of the -10 pixel x and y offsets and the .5 alpha.

 

<?xml version="1.0"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
  backgroundColor="0xFFFFFF" verticalGap="10"
  viewSourceURL="srcview/CustomProxy1SRC.html">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.events.DragEvent;
      import flash.events.MouseEvent;
      import mx.controls.Image;

      [Embed(source='assets/images/black_50_50.png')] public var blackImg:Class;
      [Embed(source='assets/images/blue_50_50.png')] public var blueImg:Class;
      [Embed(source='assets/images/brown_50_50.png')] public var brownImg:Class;
      [Embed(source='assets/images/gray_50_50.png')] public var grayImg:Class;
      [Embed(source='assets/images/green_50_50.png')] public var greenImg:Class;
      [Embed(source='assets/images/orange_50_50.png')] public var orangeImg:Class;
      [Embed(source='assets/images/purple_50_50.png')] public var purpleImg:Class;
      [Embed(source='assets/images/red_50_50.png')] public var redImg:Class;
      [Embed(source='assets/images/white_50_50.png')] public var whiteImg:Class;
      [Embed(source='assets/images/yellow_50_50.png')] public var yellowImg:Class;
     
      [Bindable] private var imagesAC:ArrayCollection = new ArrayCollection([
        {color: "0x000000", source: blackImg},
        {color: "0x0000FF", source: blueImg},
        {color: "0x754C24", source: brownImg},
        {color: "0xCCCCCC", source: grayImg},
        {color: "0x00FF00", source: greenImg},
        {color: "0xFF00FF", source: purpleImg},
        {color: "0xFF0000", source: redImg},
        {color: "0xFFFFFF", source: whiteImg},
        {color: "0xFFFF00", source: yellowImg},
        {color: "0xFF931E", source: orangeImg}
      ]);

      private function moveHandler(evt:MouseEvent):void{               
        var colorData:String = evt.currentTarget.name;
        var dragInitiator:Image = Image(evt.currentTarget);
        var datasource:DragSource = new DragSource();
        datasource.addData(colorData, "color");  
       
        var canvasProxy:Canvas = new Canvas();
        canvasProxy.height = 25;
        canvasProxy.width = 25;
        canvasProxy.setStyle("backgroundColor", colorData);
        DragManager.doDrag(dragInitiator, datasource, evt,
          canvasProxy, -10, -10, .5);
      }

      private function dragEnterHandler(evt:DragEvent):void {
        if (evt.dragSource.hasFormat("color")){
          DragManager.acceptDragDrop(Canvas(evt.currentTarget));
        }
      }

      private function dragDropHandler(evt:DragEvent):void {
        var imgCanvas:Canvas = new Canvas();
        imgCanvas.setStyle("backgroundColor", evt.dragSource.dataForFormat("color"));
        imgCanvas.width = imgCanvas.height = 50;
        var globalPoint:Point = new Point(this.mouseX, this.mouseY);
        var localPoint:Point = Canvas(evt.currentTarget).globalToLocal(globalPoint);
        imgCanvas.x = localPoint.x - 25;
        imgCanvas.y = localPoint.y - 25;
        evt.currentTarget.addChild(imgCanvas);
      }
    ]]>
  </mx:Script>
  <mx:HBox width="590" height="65" backgroundColor="0xf59fb6"
    horizontalAlign="center" verticalAlign="middle">
    <mx:Repeater id="rp" dataProvider="{imagesAC}">
      <mx:Image name="{rp.currentItem.color}" source="{rp.currentItem.source}"
        mouseMove="moveHandler(event);"/>
    </mx:Repeater>   
  </mx:HBox>
  <mx:Canvas id="workarea" width="590" height="590" borderStyle="solid"
    backgroundColor="0xf59fb6" dragEnter="dragEnterHandler(event);"
    dragDrop="dragDropHandler(event);" borderColor="0xe22052"
    borderThickness="4"/>
</mx:Application>
 

Images used in this application are attached, and should be placed in a directory assets/images under the src directory. The Cookbook software renames the images, so you're going to have to rename them as necessary.

 

+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.