Accurately Position Drag and Drop Item

Anyone who played with Flex' drag and drop function (for canvas) will know that the drag and drop function will cause the image to be incorrectly placed on a canvas. That is, the background transparent image will appear on this particular position (when you hold down your mouse button) but when you release your mouse, the image appears in another position that is not accurately where you dropped it.

This is due to the fact that the image (when you clicked) had a pointer that was not at coordinates zero, zero. When we click the image and drag, it was most likely at a portion of the image, and when we drag it around the canvas, the 'transparent rectangular background of the image' made it appear as if we are dropping the image at that particular rectangular position.

You can see the codes to do drag and drop for canvas at:
http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_7.html

In order to overcome this problem, at line dragInitiator, i added the following lines:
ds.addData(event.localX, "NumberX");
ds.addData(event.localY, "NumberY");

Then at the line of dragDropHandler, I placed the following:
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX- parseInt("" + event.dragSource.dataForFormat("NumberX"));
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY- parseInt("" + event.dragSource.dataForFormat("NumberY"));

Viola! Your image should appear wherever you drop them now.