0.14 Dragging objects between containers  (Page 2/9)

Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programmingtutorials. You will find a consolidated index at www.DickBaldwin.com .

General background information

In the earlier lesson titled Drag and Drop Basics , you learned the basics of writing ActionScript 3 code to provide a drag and drop capability. In this lesson, you will expand on thatknowledge by learning how to drag objects from one container to another container whilegiving each container the ability to either accept or reject the drop based on the type of object being dropped.

Functions, classes, methods, and events

The sample program that I will explain in this lesson will use the following functions, classes, methods, and events plus others as well:

• flash.utils.getQualifiedClassName top level function
• MouseEvent class
  • MouseDown event
• DragEvent class
  • dragDrop event
  • dragEnter event
• DragManager class
  • acceptDragDrop method
  • doDrag method
• DragSource class
  • addData method
  • hasFormat method

Preview

In this lesson, I will explain how to drag and drop components from one container into another container while giving the receiving container the ability to acceptor reject the drop on the basis of the type of object being dragged.

Program output at startup

Figure 1 shows the program output at startup.

Figure

Program output at startup.

Three Canvas objects in a VBox object

The program places three Canvas objects in a VBox object as shown in Figure 1. It places two Image objects in one of the Canvas objects. The Image objects are populated with the contents of the following two image files, which areshown in the project file structure in Figure 2.

• butterfly.jpg
• frog.jpg

Figure

Project file structure.

The image of the project file structure shown in Figure 2 was taken from the Flex Builder 3 Navigator pane.

The program also places a Button object in the middle Canvas object shown in Figure 1, and places a TextArea object in the bottom Canvas object.

Draggable objects

The two Image objects as well as the Button object and the TextArea object are all draggable.

The Canvas objects are labeled

The program places a Label object at the top of each Canvas object. The labels are for information purposes and are not draggable.

Allowable drop zones

Each of the four draggable objects can be dragged and dropped within two of the three Canvas objects so long as the mouse pointer is inside the Canvas object when the drop occurs.

None of the draggable objects can be dropped in all three of the Canvas objects. The label at the top of each Canvas object tells which types of objects can be dropped into that particular Canvas object.

Protection on the left and top

An object may not be dropped in such a way that it protrudes outside the left edge or the top of a Canvas object. If an attempt is made to do so when an object is being dragged to a new location within the same Canvas object, it simply returns to its original position.

If this happens when the object is being dragged into a different Canvas object, it assumes the same relative position in the new Canvas object that itpreviously occupied in the Canvas object from which it was dragged.