Ever want to drag a container, and have an Image of the container and it’s contents drag along with the mouse, much like when dragEnabled is set to true on a ListBase Component Like List, Tree, DataGrid, etc… You see the data that your dragging, in this image that has it’s alpha set to .5…

Application Source

There are a couple of reasons you would want to do this… one, is ALWAYS user feedback! Applications are more useful when they give feedback to the things you do. Any basic drag and drop functionality, needs some kind feedback while dragging… most of the time, you do this by setting your cursor to something different. The other reason you would want to do something more than just the cursor, is to avoid deception… say your dragging a container, and you think the container ONLY containers a certain form field… but when you show the image of the whole thing your dragging it’s more intuitive.

One of the things you have to do is grab the BitmapData from the UIComponent. You can do this by using a function written by Andrew Trice he explains it more in his post, but basically the function creates a blank Empty Matrix to hold the BitmapData. This is also a very popular way of creating reflections.

The next step is creating the code to create your DragSource, which is what holds your data, and the image that we are talking about… there is a forum post about this, and it is also covered in every flex book that I’ve ever read… which up to 5 now, but it’s very well documented….

basically, you create a new DragSource() you call dragSource.addData, and then use the DragManager.doDrag(vars…)…

the doDrag is where we are going to give the variables to use the image we’ve taken from our UIComponent…


I would totally put a brief code set in this, but please take a look at the Source acj.containers.DragImageVBox.mxml to view the source… there is a function called doDrag() that you want to look at… it’s fairly simple and the only thing that is different than any other drag source code, is the fact that we are getting bitmap data out of the component we are dragging in order to apply it to the drag source….

Application Source

so this example is very very simple, but goes to show how to grab BitmapData out of your UIComponents.