ActionScript 3 Drag and Drop

Question

I have this AS3 code:

circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
square_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(e:MouseEvent):void
{
     e.target.startDrag(false, new Rectangle(30,30,150,150));
}

function drop(e:MouseEvent):void
{
     stopDrag();
}

Now, if I test movie, if I click the circle or the square, they will jump in the stage, because I'm not allowed to move them out of that rectangle.

1. I want the script to allow me to drag the shapes anywhere (while the MOUSE_DOWN event is active), but still not allow me to drop them out of it (on MOUSE_UP).

2. How can I use an object instead of that rectangle stage?

Answer 1

Make a movie clip called target_mc, draw a 150x150 rectangle shape inside it, and place it on the stage at x=30 and y=30 (this will replace the rectangle in your code new Rectangle(30,30,150,150)). now try this code, it will get the dragged object back to its original place if it is not dropped in the correct place.you can use any other object with any shape to restrict the drop-able area.

circle_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
square_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

var draggedObject:Object;
function drag(e:MouseEvent):void
{
    draggedObject = e.target;
    draggedObject.orginalX = draggedObject.x;
    draggedObject.orginalY = draggedObject.y;
    draggedObject.startDrag(false);
}

function drop(e:MouseEvent):void
{
    stopDrag();

    // target_mc is the name of the object you want to allow dropping over it only,
    // it can be a movieclip with any shape inside it (rectangle or any other irregular shape).
    // if you like you can make it invisible by setting its alpha to 0  (target_mc.alpha = 0;)

    // Check if the mouse is over the target object at the dropping moment :
    if (target_mc.hitTestPoint(stage.mouseX,stage.mouseY,true))
    {
        trace("it was dropped INSIDE the target area");
        // ...
    }
    else
    {
        trace("it wa dropped OUTSIDE the target area");
        // bring the dragged movie back to its orginal place,
        // so it will not be able to be dropped outside your target area :
        draggedObject.x = draggedObject.orginalX;
        draggedObject.y = draggedObject.orginalY;
    }
}

Answer 2

Hey I came across this code. Isnt it better to change from

   if (target_mc.hitTestPoint(stage.mouseX,stage.mouseY,true))
    {
        trace("it was dropped INSIDE the target area");
        // ...
    }

To

 if (target_mc.hitTestPoint(draggedObject.x,draggedObject.y,true))
    {
        trace("it was dropped INSIDE the target area");
        // ...
    }

The first one, if you click with your mouse, will trigger the code, even if you are not dragging the object. The last one will make sure the dragged object is hitting the target, instead of making sure the mouse is.