You use the drag gesture all the time! Many tasks today on your computer use a form of dragging such as moving icons on a desktop, rearranging items in my Start Menu, playing with cards in Solitaire, etc. If you use Flash or Blend, you can’t draw or reposition anything on the design surface without running into a drag action. This post isn’t really about recalling every instance of drag you probably encounter daily though. That would entertain me but bore all of you!

Instead, this post is about showing you how to create your own drag functionality. Writing your own drag functionality requires a trivial amount of code if you use Flash/ActionScript’s startDrag function. This function allows you to, in a single line, setup a drag action on a object you wish to drag. All of the details are taken care off for you.

For curiosity, have you ever thought about what you would need to do if you had to implement drag without relying on a built-in method? if you have (or if you haven’t!), this post will show you how, and below you will find an example:

In the above movie, click on the circle and drag your mouse to place your circle in a different location. For the sake of time, please download the source file from below so you can follow-along:

Download Drag Source (Flash CS3)

Once you have downloaded and opened the source file, you will see the following code:

function Start() {

dragButton.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

dragButton.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

}

Start();

 

var isDragging:Boolean = false;

var xOffset:Number = 0;

var yOffset:Number = 0;

 

function mouseDownHandler(e:MouseEvent):void {

isDragging = true;

 

xOffset = e.localX;

yOffset = e.localY;

}

 

function mouseUpHandler(e:MouseEvent):void {

isDragging = false;

}

 

function mouseMoveHandler(e:MouseEvent):void {

 

if (isDragging) {

dragButton.x = mouseX - xOffset;

dragButton.y = mouseY - yOffset;

}

}

I am not going to describe the code in greater detail in this post, but hopefully it is fairly readable. There is one thing that I will describe though – and that has to do with offsets.

Don’t Forget the Offsets
While Flash makes dragging really easy, many languages require you to write essentially what I wrote above for implementing drag. One thing that many implementations forget is to deal with the offset between where you click and your object’s registration point.

Every movie clip (or button or graphic) you create in Flash has its own set of co-ordinates for positioning content stored inside it. The origin of those co-ordinates where 0, 0 is defined is known as the registration point:

By default, your registration point is at the center of your object. Your click location, though, might not be exactly at the center. You may end up clicking somewhere away from the center such as in the location defined by the red circle shown below:

If you did not account for the difference between your registration point and your click point, what will happen is that your dragged item will jump to the point of your click. For smaller items, that jump might not be noticeable. For larger items, such as the circle in my example, the jump will be noticeable, and that can look a little weird.

The solution is to deal with the offset – the difference between where you clicked and your dragged object’s registration point:

If you look at my code, you will see that I am subtracting the offset value from the point where I click on my mouse. This allows me to drag without having to be locked to the position of the registration point but instead, dragging from the point of my click itself.

Failing to account for the offset is not the end of the world, but it is a minor detail that often bugs me. Hopefully, after reading this post, your implementations of drag will do the right thing and not bug me!

Cheers!
Kirupa