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!

6 thoughts on “How do you drag and drop in AS 3.0?

  • December 4, 2009 at 2:54 am
    Permalink

    Wow! This is what Im looking for. Thanks for sharing!

    Reply
  • December 10, 2010 at 2:46 am
    Permalink

    This is awesome, exactly what I need, I am a Flash and AS3 newbie!

    I seem to be hitting a brick wall though, at first I used your example and altered it to fit my movie but could not get it to work.

    I then followed the example step-by-step to see if I could figure what I was doing wrong, but I hit the same problem.

    When I add the .as to the Document – Class Flash gives me an error…

    A definition for the document class could not be found in the classpath.

    After a lot of web research I cannot figure out for my life what I am doing wrong. Any help would be appreciated.

    Reply
    • December 10, 2010 at 4:11 am
      Permalink

      Hi Ben,
      The error means that Flash can’t locate the the actual Document class. Did you save the actual .as class in the same folder as the swf? Which flash IDE are you developing in? A bit more information may help me, help you debug the situation.

      M

      Reply
  • December 10, 2010 at 11:28 am
    Permalink

    Wow thanks for replying, I am using Flash CS5 Trial, I did save the .as in the same location as the .fla/.swf.

    I also added the path the the action script properties but that didn’t help either.

    I originally started out using an iPhone template, but changed it to ActionScript3/Flash 10 incase it was to do with that.

    My next step was to start over to see if I made some kind of school boy error such as a naming error or something, though I have looked through the code and the Flash file and can’t see anything wrong.

    Many thanks.

    Ben.

    Reply
  • December 10, 2010 at 11:46 am
    Permalink

    OK, so my schoolboy error was putting DragAndDrop.as in the Class instead of just DragAndDrop.

    However I am now getting 20 compiler errors.

    /Documents/DragAndDrop/DragAndDrop.as, Line 4 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 4 1084: Syntax error: expecting rightbrace before 1.
    /Documents/DragAndDrop/DragAndDrop.as, Line 9 1013: The private attribute may be used only on class property definitions.
    /Documents/DragAndDrop/DragAndDrop.as, Line 10 1013: The private attribute may be used only on class property definitions.
    /Documents/DragAndDrop/DragAndDrop.as, Line 11 1083: Syntax error: else is unexpected.
    /Documents/DragAndDrop/DragAndDrop.as, Line 11 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 11 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 11 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 11 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 12 1083: Syntax error: else is unexpected.
    /Documents/DragAndDrop/DragAndDrop.as, Line 12 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 12 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 12 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 12 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 13 1083: Syntax error: else is unexpected.
    /Documents/DragAndDrop/DragAndDrop.as, Line 13 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 13 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 13 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 13 1093: Syntax error.
    /Documents/DragAndDrop/DragAndDrop.as, Line 14 1083: Syntax error: else is unexpected.

    I copy pasted the above code this time around to try and eliminate any typos on my part??

    Cheers.

    Ben.

    Reply
  • December 11, 2010 at 3:16 pm
    Permalink

    Phew! I managed to work my way through and figure this out.

    Learnt a lot on the way too! Many thanks.

    Ben\

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: