Drag Drop from a Pop-up(Library Module)

Hi folks,
The entire last week i was struggling with the Drag Drop functionality for one of our module..So i wanna post this example for other ppl..I have seen lotsa queries on the same.So here is the example which i had created along with one of my team member.

Library.mxml
------------
<%

%>

import mx.core.IFlexDisplayObject;
import mx.controls.Alert;
import mx.containers.Canvas;
import mx.managers.PopUpManager;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.containers.Canvas;
import mx.controls.Image;

public var dragInitiator:Image;
public var ds:DragSource;
public var dragProxy:Image;

public var libPop:*;
public var canTarget:Canvas;
public var imgTarget:Image;

public function openLibrary():void
{
libPop = PopUpManager.createPopUp( this ,CustLib, false );
}

public function dragEnterHandler(event:DragEvent):void
{
DragManager.showFeedback(DragManager.COPY);
canTarget = Canvas(event.currentTarget);
DragManager.acceptDragDrop(canTarget);
}

public function dragDropHandler(event:DragEvent):void
{
var dropTarget:Canvas = Canvas(event.currentTarget);
var imageProxy:Image = new Image();
imageProxy.source = libPop.ImageSelection.dataProvider[libPop.ImageSelection.selectedIndex].icon;

imageProxy.height = dropTarget.height/2;
imageProxy.width = dropTarget.width/2;
imageProxy.x = dropTarget.mouseX-75;
imageProxy.y = dropTarget.mouseY-75;

dropTarget.addChild(imageProxy);
}

public function displayChildren():void
{
Alert.show("Canvas Children-> "+myCan.numChildren.toString() + "\n" + "Pop Children->"+libPop.numChildren.toString());
}

]]>

dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);"
backgroundColor="#ffffff"
backgroundAlpha="1.0"
>







CustLib.mxml
-------------



x="{mx.core.Application.application.myCan.x + mx.core.Application.application.myCan.width}"
y="{mx.core.Application.application.myCan.y}"
>

import mx.events.DragEvent;
import mx.collections.*;
import mx.managers.DragManager;
import mx.controls.Alert;
import mx.controls.Image;
import mx.containers.Canvas;


[Bindable]
[Embed(source="assets/AAH.jpg")]
public var phone1:Class;

[Bindable]
[Embed(source="assets/AAV.JPG")]
public var phone2:Class;

[Bindable]
[Embed(source="assets/BLUESUN.JPG")]
public var phone3:Class;

[Bindable]
[Embed(source="assets/10c.png")]
public var phone4:Class;

[Bindable]
[Embed(source="assets/EYE.JPG")]
public var phone5:Class;


private function doDragEnter(event:DragEvent):void
{
var dropTarget:Canvas=Canvas(event.currentTarget);
DragManager.acceptDragDrop(dropTarget);
}

private function doDragDrop(event:DragEvent):void
{
var dropTarget:Canvas=Canvas(event.currentTarget);
var imageProxy:Image = new Image();
imageProxy.source = Image(event.dragSource.dataForFormat('images')).source;

imageProxy.height = dropTarget.height/2;
imageProxy.width = dropTarget.width/2;
imageProxy.x = dropTarget.mouseX-75;
imageProxy.y = dropTarget.mouseY-75;


}



paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" layout="absolute">
maxColumns="1" rowHeight="125" columnWidth="125" dragEnabled="true" >