How do you drag and drop in AS 3.0?

The other day I was approached by a flash designer who was creating an avatar drag & drop interface. He wanted to know how I would approach creating such an interface. Well he didn’t like my answer because I drew him into OOP land. He was trying to avoid all that, so I gave him the run down on how he could build a simple drag & drop and then hack his way to save it to the model. After creating a quick demo I decided to share it with the community.

Drag & Drop: designer option
Lets start from scratch, open up Flash and Save it.
label the default layer “targets”.
Grab your drawing tools and create a circle, rectangle, square and triangle.
Select each shape and Convert them to Movieclips by right clicking (or ctrl click MAC) select Convert to Symbol option.
In the Name dialog enter a name (eg: circle).
In the Type radio buttons select MovieClip.
Select OK.
Create a new layer and label it draggable.
Open up the library and drag each shape to the stage , place them where ever you like and make sure that they are on the draggable layer.
For each draggable shape select and open the properties panel and give it an instance name (eg: circle1).
For each target shape select and open the properties panel and give it an instance name (eg: circle2).
You should end up with 2 of every shape on stage with instance names (eg: circle1 for the draggable and circle2 for the target).

layout

Now its time for the code. Essentially, all we need to do is access the movieclips on stage, record the draggable movieclips original x and y position, so that we can snap back to the position if the user drops the movicelip somewhere other than its intended target. Add MouseEvents to our draggable movieclip to enable the drag and drop. Code up logic that will determine if the draggable movieclip has been dropped on its intended target, and create a method which will snap the draggable movieclip to its target, that pretty much sums it up.
Open up your text editor and start typing.

package {

import flash.display.MovieClip;
import flash.events.MouseEvent;

public class DragAndDrop extends MovieClip {
private var topDepth:Number;
public function DragAndDrop() {

topDepth = numChildren – 1; //lets get the number of children in the dsiplay object and subtract 1 to get the highest depth
var squareObject = new Object(); //create an object to store data
squareObject.ogX = square1.x; // store the draggable square original x position
squareObject.ogY = square1.y; // store the draggable square original y position
square1.posObj = squareObject; // add a property to the draggable square and assign the value to be the object
square1.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag); // add mouse event listeners for the interactivity
square1.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);

var circleObject = new Object();
circleObject.ogX = circle1.x;
circleObject.ogY = circle1.y;
circle1.posObj = circleObject;
circle1.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag);
circle1.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);

var rectangleObject = new Object();
rectangleObject.ogX = rectangle1.x;
rectangleObject.ogY = rectangle1.y;
rectangle1.posObj = rectangleObject;
rectangle1.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag);
rectangle1.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);

var triangleObject = new Object();
triangleObject.ogX = triangle1.x;
triangleObject.ogY = triangle1.y;
triangle1.posObj = triangleObject;
triangle1.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag);
triangle1.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);
}

private function onStartDrag(evt:MouseEvent):void { // starts the dragging
evt.target.startDrag();
setDepth(evt.target as MovieClip)
}

private function setDepth(mc:MovieClip):void // sets depth of the draggable mc
{
setChildIndex(mc,topDepth);
}

private function onStopDrag(evt:MouseEvent):void { // the logic which checks for the drop target
evt.target.stopDrag();
if(evt.target.dropTarget) {
if(evt.target.name == “circle1″ && evt.target.dropTarget.parent.name == “circle2″) {

snapToObject(evt.target as MovieClip);
}
else if(evt.target.name == “square1″ && evt.target.dropTarget.parent.name == “square2″) {

snapToObject(evt.target as MovieClip);
}
else if(evt.target.name == “rectangle1″ && evt.target.dropTarget.parent.name == “rectangle2″) {

snapToObject(evt.target as MovieClip);
}
else if(evt.target.name == “triangle1″ && evt.target.dropTarget.parent.name == “triangle2″) {

snapToObject(evt.target as MovieClip);
}else{

snapBackToOriginalPosition(evt.target as MovieClip);
}
}else{

snapBackToOriginalPosition(evt.target as MovieClip);
}
}

private function snapToObject(shape:MovieClip):void { // method snaps the draggable to its target
shape.x = shape.dropTarget.parent.x;
shape.y = shape.dropTarget.parent.y;
}
private function snapBackToOriginalPosition(shape:MovieClip):void // method snaps back to original position
{

shape.x = shape.posObj.ogX;
shape.y = shape.posObj.ogY;
}

}
}

All that is left to do is make the above class your flas. Document class.
Save the class as DragAndDrop.as and make sure its in the same folder as the fla.
Navigate back to the Flash Ide and open the properties panel and under Document class enter DragAndDrop. COMPILE! Select-Control Test Movie, and there you go, your very own basic drag&drop interface.
Enjoy!

Share: