I find that Drag and Drop is the most intuitive form of user interaction (at least using a mouse). Actionscript has some of this functionality built in, with the interactive functions startDrag and stopDrag, these can help make our coding pretty easy. If you are transitioning from as2, the code was incredibly simple:
Actionscript2
startDrag (this);
}
on (release, releaseOutside) {
stopDrag ();
}
On the movie clip action panel you’d just put that script, which is actually pretty readable even if you don’t know code. The releaseOutside is to keep from the clip missing the release event, because sometimes if a user released the mouse button but was not currently over the clip being dragged for whatever reason, it will not stop dragging.
Actionscript 3
Some things have changed with as3, other than the actual coding structure, the biggest change for me doing drag and drop in the new actionscript was that the mouse events have changed. There is no more a press or release. They were replaced with, MOUSE_DOWN and MOUSE_UP. There is no more releaseOutside either and this one is a little more complicated to find among the new MouseEvent list.
Leaving it out works, but we still have the same problem. Check out the working example below and try dragging the red ball to the green or yellow one and drop it there. Since the green is above the red in the layer sequence, the mouse is over the green and when the MouseEvent.MOUSE_UP fires, it’s not on the red ball but on the green, so we don’t get to the code that drops the red ball. So the red ball code basically has times when the dragging sticks even after we release the mouse button. Not to mention the dragging is very jumpy!
ballRed.addEventListener(MouseEvent.MOUSE_UP, dropRed);
function dragRed(e:MouseEvent):void{
ballRed.startDrag();
}
function dropRed(e:MouseEvent):void{
ballRed.stopDrag();
}
Using the Mouse Move event will help us to customize our behavior a bit more. Plus I wanted to get a more abstract level to it, so I could apply the event listeners to any display object and use the event properties to target the right clips. We begin the drag with the Mouse Down, and the create some other eventListeners for the stage that will watch the Mouse Move and Up events. So clicking on the green or yellow ball, fires the grabMe function which sets the me variable (which will hold any object) to the current target of the event, which should always be the object that you click. So we are using the same code for both the green and yellow ball. I’m a big fan of code consolidation and reuse, it takes a little more effort, but the code is much more clean and portable even. Then we add the event listeners for the stage on MOUSE_MOVE and MOUSE_UP. So first, mthe dragMe function, just says to update after event. This makes the animation smoother cause it only updates the display after the event completes it’s process. Then the drop me function is attached to the stage, so anywhere you release the mouse, the object will stop dragging, plus we remove the stage event listeners and add back the listener for the original object (me). Note the buttonMode property as well, this will make the cursor turn to a hand when you hover that object.
ballYellow.buttonMode = true;
ballGreen.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
ballGreen.buttonMode = true;
var me:Object;
function grabMe(e:MouseEvent):void{
me = e.currentTarget;
me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);
me.startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);
stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
}
function dropMe(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
me.stopDrag();
me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
}
function dragMe(e:MouseEvent):void {
e.updateAfterEvent();
}
This functionality is much smoother and then when I want to add more code to the dragging or dropping, I have a place to do it already!
Example
12 Comments
interesting example, I’ve run into this as well and had to use a work-around. Thanks for the tip
Nice tutorial, I as well had to do a work around because I wasn’t happy with the performance, but your code was a little better.
What i´ve made to correct this issue??
I´ve made a class extending the Sprite or MovieClip with the function Drag, that automatically add the listener to the stage when the mouse is down over the object, and remove when the stage has a mouseup… also all you need to do is “myInstance.draggable=true;” to create a draggable object, and you have another parameters like: lockCenter, bounds, smoothDrag (e.updateAfterEvent), topLevel (when mouse is down and topLevel is true the object becomes the top level of the container)
Hi,
Is there neccessary to use “me” variable? Could we use just “this” instead?
like -> this.startDrag(); etc.
thanks
Worked great for me. Thanks for the tutorial.
@fedoo – the “me” isn’t required I’ve had to use it a couple times to specify the object that is being dragged in different ways in the past, and I guess it just stuck. using this is chancy though because at different times this can mean different things… I try to at least always use event.currentTarget or something of the sort.
Thanks!
Thanks for the tip, very useful, i was using different approach, but it is similar.
i need circle will delete when i right click on cirlce. how it will be.
Hi, I tried in flash builder and it is working fine.
Below is the code :-
just copy and paste this code in .mxml component.
//Import classes so you don’t have to use full names.
public function start():void
{
a3.addEventListener(MouseEvent.MOUSE_DOWN,grabME);
a3.buttonMode = true;
a4.addEventListener(MouseEvent.MOUSE_DOWN,grabME);
a4.buttonMode = true;
a5.addEventListener(MouseEvent.MOUSE_DOWN,grabME);
a5.buttonMode = true;
a6.addEventListener(MouseEvent.MOUSE_DOWN,grabME);
a6.buttonMode = true;
a2.addEventListener(MouseEvent.MOUSE_DOWN,grabME);
a2.buttonMode = true;
}
private var me:Object;
public function grabME(e:MouseEvent):void
{
me = e.currentTarget;
me.removeEventListener(MouseEvent.MOUSE_DOWN, grabME);
me.startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE,dragMe);
stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
}
public function dropMe(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
me.stopDrag();
me.addEventListener(MouseEvent.MOUSE_DOWN, grabME);
}
public function dragMe(e:MouseEvent):void
{
e.updateAfterEvent();
}
Thanks for this nice tutorial
Best of luck for your next tutorial.
Hi, I am doing a puzzle game. MOUSE_DOWN is to startDrag(); and MOUSE_UP is to stopDrag();. I also used x and y coordinates to snap and hold the puzzle piece into place once the piece goes over the invisible movie clip. It works for the first puzzle piece which snaps into place but when I want to move my other puzzle pieces it doesn’t allow it.
Do I add removeEventListenr():? Because when I do it says “Incorrect number of arguements? Thanks for the help.
Dude
Cheers for this, I’ve been getting strange interference to my keyboard events caused by a slider and this appears to have fixed the issue and makes for far smoother dragging.
Nice bit of code. FYI – you are able to drag the yellow and green circles off screen and lose their handle. The red circle stays within bounds, though.
One Trackback
[...] strong class=keywordFlex/strong optimization techniques and practices Open Enterprise 2009: Dion Flash Drag and Drop Tutorial | startDrag Actionscript – circlecube.com 04/24/2009 I find that Drag and Drop is the most intuitive form of user [...]