Flex Drag and Drop Custom Class Source Code Example:

Creat a New mxml file:

classdragdrop .mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" creationComplete="initApp()"> <mx:Script> import mx.core.*; import mx.managers.DragManager; import mx.events.DragEvent; import mx.collections.ArrayCollection; [Bindable] public var cart : ArrayCollection; private function initApp() : void { thumbnail.product={name: 'Siemens SX1', price: 99.99, image: 'assets/products/Siemens_SX1.png'}; cart = new ArrayCollection(); } private function doDragEnter(event:DragEvent):void { if (event.dragSource.hasFormat("item")) { DragManager.acceptDragDrop(IUIComponent(event.target)); event.preventDefault(); } } private function doDragDrop(event:DragEvent):void { var item:Object = event.dragSource.dataForFormat("item"); cart.addItem(item); event.preventDefault(); } </mx:Script> <mx:Label text="Drag the product thumbnail and drop it in the datagrid"/> <mx:HBox horizontalGap="30" height="100%"> <Thumbnail id="thumbnail"/> <mx:Panel title="Shopping Cart" width="300" height="100%" borderAlpha="1" paddingTop="20"> <mx:DataGrid id="dg" dataProvider="{cart}" width="100%" height="100%" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="price" headerText="Price"/> </mx:Array> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:HBox> </mx:Application>

thumnail.xml

<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4" borderStyle="solid" verticalAlign="middle" backgroundColor="#FFFFFF" width="170" height="130" horizontalScrollPolicy="off" verticalScrollPolicy="off" mouseMove="beginDrag(event)"> <mx:Script> import mx.core.*; import mx.managers.DragManager; [Bindable] public var product:Object; public function beginDrag(event:MouseEvent) : void { var ds:DragSource = new DragSource(); ds.addData(product, "item"); var proxy:Thumbnail = new Thumbnail(); //The drag proxy proxy.product = product; DragManager.doDrag(this, ds, event, proxy, 16-mouseX, -mouseY, 0.5, false); } </mx:Script> <mx:Image id="img" source="../{product.image}" width="50" height="100"/> <mx:VBox width="100%" height="100%" verticalAlign="middle"> <mx:Label text="{product.name}" fontSize="11" fontWeight="bold"/> <mx:Label text="Price: {product.price}"/> </mx:VBox> </mx:HBox>