Relax Breath of Solution.

Flex Drag and Drop Custom Class Source Code Example:

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>