20 Aug, 2007
Customize the DataGrid drag proxy AS 3.0
Posted by: Anca Alimanescu In: ActionScript 3.0
I am going to show you how to customize the drag proxi and make visible only the name of one field when dragging a grid item to a canvases. Each canvas contains a label that will display the text of the dragged item.
When dragging an item from the DataGrid, no matter how many columns the row has,usually all the information in the grid item will be dragged.
For ex the drag proxi when dragged will contain : Original Cast , Camelot , 12,99.
We will use the Drag Manager component of the framework and enable the drag and drop properties for the data grid :
dragEnabled="true"
dropEnabled="true"
mouseMove="dragIt(event,' ','name')"
Next we will handle the mouseMove event for the DataGrid by using the dragIt handler with the format parameter “name” :
private function dragIt(event:MouseEvent, text:String, format:String):void
{
try
{
// Get the drag initiator component from the event object.
var dragInitiator: * = event.target;
// Create a DragSource object.
var ds:DragSource = new DragSource();
// Add the data to the object.
if (srcgrid.selectedItem!=null)
text = srcgrid.selectedItem.Artist;
ds.addData(text, format);
// Create a Label container to use as the drag proxy.
// You must specify a size for the proxy image,
// or else it will not appear.
var canvasProxy:Label = new Label();
canvasProxy.width=100;
canvasProxy.height=30;
canvasProxy.text = text;
// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
}
catch (er:Error)
{
trace("selection not finished yet")}
}
For the two Canvases the dragEnter and dragDrop events will be handled by adding the parameters that will help identify which label is the drop target.
//for the first canvas
dragEnter="doDragEnter(event)
dragDrop="doDragDrop(event,1)
//for the second canvas
dragEnter="doDragEnter(event)"
dragDrop="doDragDrop(event,2)"
The doDragEnter function will be called if the user drags the proxi 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 'name' format value.
if (event.dragSource.hasFormat('name')) {
DragManager.acceptDragDrop(dropTarget);
}
}
The doDragDrop function will be called if the target accepts the dragged object and the user releases the mouse button while over the canvas. Here is identified which canvas responded to the event, and according to its parameter the label contained will be updated.
private function doDragDrop(event:DragEvent, index:int):void {
// Get the data identified by the name format
// from the drag source.
var data:Object = event.dragSource.dataForFormat('name');;
//Set the text of the label on the target Canvas
if (index==1)
Label(cv1.getChildAt(0)).text = data.toString();
if (index==2)
Label(cv2.getChildAt(0)).text = data.toString();
}
To view the application click here. For the source code click here(zip archive).
