Dragging and Dropping is a common method on any computer, but how do you do it on Flash, through ActionScript

There are two very simple methods that allows you to drag and drop. first is StartDrag() and second is StopDrag() (drag and drop respectively). Let's start with one object on the stage. A Movie clip with the instance name -  box - so we shall now build a very simple code.

As you can see above, I've got two very simple button handlers, one for when the mouse button is pressed, and one for when the mouse button is released. So, when the mouse button is pressed - start the drag process, and when the mouse button is released - drop the box. Simple. See below for the example:

In todays world, the above code just doesn't cut it. We need to make it snap as well. There's a very simple code that will help you determine where the intended target is.That code is _droptarget. I've created a simple circle and converted it to a movieclip - then I gave it the instance name of target.

As you can see from the above code. I've created an "if" statement to determine if the drop target was the circle (target) or not - (the / preceeding the word target is necessary to identify the instance). If the drop target is the symbol "target" then match the x and y coordinates of the box with those of the target. If the target is not the circle, snap back to it's original position (which is 440 by 12 on my stage).

The problem we have now is that the box is always snapping the the top-left hand corner of the circle symbol. This wont do, we need to write a simple algorithm so that whatever the size and position of the target, the box always snaps to the centre of it. So to do this, let's re-visit the "if" statement from the last piece of code.

For those of you not confident at maths, it's taking the dimensions of the target away from the box, adding them to the targets current location and dividing it by 2, which makes an x and a y co-ordinate of the target's centre and it then places the box there. It can be quite difficult to understand so I'll do my best to explain it.

Imagine we have a 100 by 100 grid, with box being 50px wide and target being 75px wide - the box sits at x22 and the target sits at x36. Lets put these values into the first part of the algorithm -

So, the x co-ordinate of the box would be 48.5 which given that the target sits at 36, and is much bigger than the box means that the co-ordinate sounds about right. This code would then apply to the box's Y coordinate but it would use the height instead of the width.

The good thing about this code is that whether you understand it or not, you can still use it, just substitute the instance names with your own and it will work.

See the difference. If your satisfied with your outcome you can end the tutorial here, as what I'm about to discuss next is a little more complex. Click Next to continue