| << Chapter < Page | Chapter >> Page > |
<?xml version="1.0" encoding="utf-8"?><!--DragAndDrop04
--><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cc="CustomClasses.*"><cc:Driver/></mx:Application> /*DragAndDrop04
Illustrates how to drag components from one containerto another while giving the receiving container the
ability to accept or reject the drop on the basis of thetype of object being dragged.
Places three Canvas objects in a VBox object.Places two images in one of the Canvas objects:
butterfly.jpgfrog.jpg
Places a Button object in a second Canvas object.Places a TextArea object in the third Canvas object.
All four of above objects are draggable.Places a label at the top of each Canvas object, but the
labels are not draggable.Any of the four draggable objects can be dragged and
dropped anywhere within two of the three Canvas objectsso long as the mouse pointer is inside the Canvas object.None of the objects can be dropped in all three of the
Canvas objects.If an object is dropped so that it protrudes outside the
left edge or the top of the Canvas object when beingdragged to a new location within the same Canvas object,
it simply returns to its original position. If thishappens when the object is being dragged into a different
Canvas object, it assumes the same relative position inthe new Canvas object that it previously occupied in the
Canvas object from which it was dragged.If the dragged object is dropped such that it protrudes
outside the right side or the bottom of the Canvasobject, scroll bars automatically appear on the Canvas
object.The size of the canvas is based on the size of the
butterfly image so that other images can be substitutedfor my images when the program is recompiled so long as
the file names and paths are correct.*********************************************************/
package CustomClasses{import flash.events.MouseEvent;
import flash.utils.getQualifiedClassName;import mx.containers.Canvas;import mx.containers.VBox;
import mx.controls.Button;import mx.controls.Image;
import mx.controls.Label;import mx.controls.TextArea;
import mx.core.DragSource;import mx.core.UIComponent;
import mx.events.DragEvent;import mx.events.FlexEvent;
import mx.managers.DragManager;//====================================================//public class Driver extends VBox {
private var button:Button = new Button();private var butterfly:Image = new Image();
private var frog:Image = new Image();private var textArea:TextArea = new TextArea();
private var canvasA:Canvas = new Canvas();private var canvasB:Canvas = new Canvas();
private var canvasC:Canvas = new Canvas();private var labelA:Label = new Label();
private var labelB:Label = new Label();private var labelC:Label = new Label();
private var localX:Number;private var localY:Number;public function Driver(){//constructor
//Put a label at the top of each Canvas object.labelA.text = "Images and buttons only";
labelB.text = "Buttons and text areas only.";labelC.text = "Text areas and imges only";
canvasA.addChild(labelA);canvasB.addChild(labelB);
canvasC.addChild(labelC);//Add the Canvas objects to the VBox objectaddChild(canvasA);
addChild(canvasB);addChild(canvasC);
//Embed the image files in the SWF file.[Embed("butterfly.jpg")]
var butterflyA:Class;[Embed("frog.jpg")]var frogA:Class;//Load the images from the embedded image files
// into the Image objects.butterfly.load(butterflyA);
frog.load(frogA);//Put some text on the button and in the text area.button.label = "button";
textArea.text = "textArea";//Add the components to the Canvas objects.canvasA.addChild(butterfly);
canvasA.addChild(frog);canvasB.addChild(button);
canvasC.addChild(textArea);//Register an event handler that will be executed
// whcn the canvas and its children are fully// constructed.
this.addEventListener(FlexEvent.CREATION_COMPLETE,completeHandler);
} //end constructor//--------------------------------------------------//
//This handler method is executed when the Canvas and// its children have been fully created.
private function completeHandler(event:mx.events.FlexEvent):void{
//Make the Canvas objects visible.canvasA.setStyle("backgroundColor",0x00FFFF);
canvasB.setStyle("backgroundColor",0x00FFFF);canvasC.setStyle("backgroundColor",0x00FFFF);//Set the width and height of the canvas objects
// based on the dimensions of butterfly.canvasA.width = 1.6*butterfly.width;
canvasA.height = 1.6*butterfly.height;canvasB.width = 1.6*butterfly.width;
canvasB.height = 1.6*butterfly.height;canvasC.width = 1.6*butterfly.width;
canvasC.height = 1.6*butterfly.height;//Reduce the width of the textArea to less than// its default width.
textArea.width = butterfly.width;//Move the images, the button, and the text area// below the label
butterfly.y = labelA.height;frog.y = labelA.height + butterfly.height;
button.y = labelB.height;textArea.y = labelC.height;//Register event listeners to support drag and drop
// operations on both images, the button, and the// text area with the canvas as the drag target.
butterfly.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
frog.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
button.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
textArea.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
//Register a different dragEnter event handler on// each Canvas object to make it possible for each
// Canvas object to accept only two of the three// types of components for dropping.
canvasA.addEventListener(DragEvent.DRAG_ENTER,enterHandlerA);
canvasB.addEventListener(DragEvent.DRAG_ENTER,enterHandlerB);
canvasC.addEventListener(DragEvent.DRAG_ENTER,enterHandlerC);
//Register the same dragDrop event handler on all// three Canvas objects.
canvasA.addEventListener(DragEvent.DRAG_DROP,dropHandler);
canvasB.addEventListener(DragEvent.DRAG_DROP,dropHandler);
canvasC.addEventListener(DragEvent.DRAG_DROP,dropHandler);
} //end completeHandler//--------------------------------------------------//// This event handler initiates the drag-and-drop \
// operation for the image that dispatches the// mouseDown event.
private function mouseDownHandler(event:MouseEvent):void{
//Save the location of the mouse within the object// 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;
//The drag initiator is the object that dispatched// this mouseDown event. Get a string containing
// the name of the class from which that object was// instantiated. For the components used in this
// program, the possible strings are:// Image - "mx.controls::Image"
// Button - "mx.controls::Button"// TextAra - "mx.core::UITextField"
//Note, the following function is in the// flash.utils package.
var className:String = getQualifiedClassName(event.target);
//Populate a new DragSource object with the drag// initiator and a format string based on the class
// from which the drag initiator was instantiated.//The format string will be used later to decide
// if a particular Canvas object is willing to// allow a particular type of object to be dropped
// on it.//Note that when the target of the mouseDown event
// is used as the drag initiator, it must be cast// to type UIComponent.
var dragSource:DragSource = new DragSource();if(className == "mx.controls::Image"){
dragSource.addData(UIComponent(event.currentTarget),"imageObj");
}else if(className == "mx.controls::Button"){dragSource.addData(UIComponent(
event.currentTarget),"buttonObj");
}else if(className == "mx.core::UITextField"){dragSource.addData(UIComponent(
event.currentTarget),"textAreaObj");} //end else if
//Initiate the drag and drop operation.DragManager.doDrag(UIComponent(event.currentTarget),
dragSource,event);}//end mouseDownHandler
//--------------------------------------------------////Each of the following dragEnter event handlers is// executed when the dragged omponent enters the
// Canvas object on which the handlr is registered.// The event handlers decide whether or not to accept
// a drop on the basis ofthe format string associated// with the type of object being dragged. Note that
// each Canvas ovject will accept two of the three// types of objects.//This dragEnter event handler causes the canvas to
// accept images and buttons.private function enterHandlerA(event:DragEvent):void{
if ((event.dragSource.hasFormat("imageObj")) ||(event.dragSource.hasFormat("buttonObj"))){DragManager.acceptDragDrop(
Canvas(event.currentTarget));} //end if
} //end enterHandler//--------------------------------------------------////This dragEnter event handler causes the canvas to
// accept textAreas and buttons.private function enterHandlerB(event:DragEvent):void{
if ((event.dragSource.hasFormat("textAreaObj")) ||(event.dragSource.hasFormat("buttonObj"))){DragManager.acceptDragDrop(
Canvas(event.currentTarget));} //end if
} //end enterHandler//--------------------------------------------------////This dragEnter event handler causes the canvas to
// textAreas and images.private function enterHandlerC(event:DragEvent):void{
if ((event.dragSource.hasFormat("textAreaObj")) ||(event.dragSource.hasFormat("imageObj"))){DragManager.acceptDragDrop(
Canvas(event.currentTarget));} //end if
} //end enterHandler//--------------------------------------------------////Execute the dragDrop event handler to drop the
// object in its new location. Compensate for the// fact that the mouse pointer is not at the
// upper-left corner of the object when the drag is// initiated. Don't allow the image to be dragged off
// the left side of the canvas or off the top of the// canvas. See more information about this in the
// comments at the top.private function dropHandler(event:DragEvent):void{
//Add the drag initiator to the new container.// Note that it is not necessary to first remove it
// from its old container.//Also note that the z-axis index is lost in this
// operation. When an object is dropped on top of// another object in the new container, it stays on
// top regardless of the original z-order of the// two objects.
//The original z-order has no meaning when you drag// objects into a canvas from several othr Canvas
//event.currentTarget.addChild(event.dragInitiator);
//Position the dragInitiator in the Canvas object// based on the mouse coordinates at the drop and
// the mouse coordinates relative to the upper-// left corner of the drag initiator at the
// start of the drag.//Compute the correct position for the upper-left
// corner of the dropped object.//If you attempt to drop an object so that it
// protrudes out of the left side or the top of// the canvas, the drag and drop operation is
// simply aborted.var cornerX:Number = (Canvas(event.currentTarget).
mouseX) - localX;var cornerY:Number = (Canvas(event.currentTarget).
mouseY) - localY;if((cornerX>0.0)&&(cornerY>0.0)){
event.dragInitiator.x = cornerX;event.dragInitiator.y = cornerY
} //end if} //end dropHandler
//--------------------------------------------------//} //end class} //end package
-end-
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|