Drag an Image to DataGrid and do calculation based on new added item
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="300">
<mx:Script>
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
[Bindable]
public var total:Number = 0;
[Bindable]
public var cartContents:ArrayCollection = new ArrayCollection();
private function dragIt(event:MouseEvent, name:String, price:Number):void {
var dragInitiator:Image = event.currentTarget as Image;
var dragSource:DragSource = new DragSource();
dragSource.addData(name, 'name');
dragSource.addData(price, 'price');
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}
private function dragEnterHandler(event:DragEvent):void {
var dropTarget:DataGrid=event.currentTarget as DataGrid;
if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
DragManager.acceptDragDrop(dropTarget);
}
}
private function dragDropHandler(event:DragEvent):void {
var name:String = String(event.dragSource.dataForFormat('name')) ;
var price:Number = Number(event.dragSource.dataForFormat('price')) ;
this.cartContents.addItem({name:String(event.dragSource.dataForFormat('name')),price:Number(event.dragSource.dataForFormat('price'))});
total += price;
}
</mx:Script>
<mx:HBox>
<mx:Image source="logo.jpg" mouseMove="dragIt(event, 'Product', 1.9);" />
<mx:DataGrid id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" x="175" y="50" height="165">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name" />
<mx:DataGridColumn dataField="price" headerText="Price" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="Total: $ {total}"/>
</mx:HBox>
</mx:Application>
Related examples in the same category
