| << Chapter < Page | Chapter >> Page > |
Register dragDrop and dragEnter event handlers on the Canvas object
Two different event handlers must be registered on the drag target, which is the Canvas object in this case. The registration of those event handlers on the Canvas object is accomplished in Listing 8.
this.addEventListener(DragEvent.DRAG_DROP,
dropHandler);this.addEventListener(DragEvent.DRAG_ENTER,
enterHandler);} //end completeHandler Beginning of the mouseDown event handler
The mouseDown event handler that was registered on the Image objects in Listing 7 begins in Listing 9. This event handler initiates the drag and drop operation on the Image object that dispatches the event.
private function mouseDownHandler(
event:MouseEvent):void{//Save the location of the mouse within the image
// being dragged. This information will be used// later to properly position the dropped image in
// the drop target.this.localX = event.localX;
this.localY = event.localY; Positioning the dropped object
The easiest approach simply drops the image with its upper-left corner at the position of the mouse pointer when the mouse button is released. However, in myopinion, that is somewhat less than satisfactory from a visual viewpoint.
The drag proxy
When you drag an image, there is a default drag proxy that moves along with the mouse. (It is possible to replace the default drag proxy with a drag proxy of your choice.) The default drag proxy is a partially transparent rectangle that is the same size as the image.
Adjust the position of the upper-left corner
My preference is to manually adjust the drop location of the image based on the upper-left corner of the drag proxy andnot based on the location of the mouse pointer. The code in Listing 9 gets and saves the coordinates of the mouse pointer within the image when the event isdispatched. As you will see later, I use these coordinates later to set the drop location on the basis of the upper-left corner of the proxy.
Get and save the drag initiator
The documentation refers to the object being dragged as the drag initiator .
//Get the drag initiator component from the event
// object and cast it to the correct type.var dragInitiator:Image = Image(
event.currentTarget); In this program, the drag initiator could be any of the three images shown in Figure 1 and Figure 3.
The code in Listing 10
Populate a DragSource object with a copy of the image being dragged
Here is part of what the documentation has to say about the DragSource class.
"The DragSource class contains the data being dragged. The data can be in multiple formats, depending on the type of controlthat initiated the drag.
Each format of data is identified with a string. ... Data can be added directly using the addData() method, or indirectly using theaddHandler() method."
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|