TechNote (Archived)

Flex drag and drop: How to change the dragProxy image at runtime

Issue

---

A common requirement for drag/drop functionality is the ability to change the drag image (dragProxy) when it is moved over a valid drop target. This article explains how to implement this feature in a Flex application.

The documentation for the dragManager API is located here.

Solution

---

Below are the relevant code snippets. The full source code can be downloaded here.

1. Declare an application level variable so the dragProxy object can be referenced from any scope in the application.
   
   var testProxy:mx.controls.Image;
2. Use the imageInitObj property of the mx.managers.DragManager.doDrag() method to create a custom dragProxy image. Set an 'id' property so you can reference the object.
   
   Usage: mx.managers.DragManager.doDrag( dragInitiator, dragSource: mx.core.DragSource, dragImage: Object, imageInitObj: Object, xOffset: Number, yOffset: Number, imageAlpha: Number)

mx.managers.DragManager.doDrag(this, ds,mx.controls.Image, {id: 'testProxy', source: myImageSymbol1} , -point.x, -point.y, 100);
3. Swap the dragProxy in the 'dragOver' and 'dragExit' event handler functions:

    function doDragOver(event) {   //change drag proxy image, only once or this will run many times   if(testProxy.source == myImageSymbol1 ){        testProxy.source = myImageSymbol2;  } }  function doDragExit(event) {   //revert drag proxy back to original image   if(testProxy.source == myImageSymbol2 ){        testProxy.source = myImageSymbol1;  } } 

Search Support

---