How to drag and drop multiple movieclips at the same time

Question

Hi everyone,

I’m a new actonscript 3 and adobe flash CC user and I’m building an application but I've been stuck for several days now. I've looked everywhere and tried everything I could think of but I still can’t find a solution to my problem which I thought was pretty basic.

Basically, let’s say I have one rectangle and one circle on the stage. Once I’ve turned them into movieclips and assigned an instance name to each one of them, I’d like to be able to perform a drag and drop on the rectangle so that both the rectangle and the circle become draggable at the same time.

For now, I have a mouse-down event listener attached to the rectangle instance, a startDrag method assigned to the rectangle instance and another one assigned to the circle. But in this configuration, when I click and drag the rectangle, only the circle is moveable (only the last line in the code is taken into account).

I don’t know if what I’m trying to achieve is feasible but any help will be greatly appreciated, thanks!

Ned Murphy · Accepted Answer

The startDrag() method can only work for one object at a time, so in your case the last one designated the task processes it. One way to approach this is to temporarily plant the two objects in a container and drag the container.

rectangle.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag); // when I click the rectangle

var dragMC:MovieClip = new MovieClip();
addChild(dragMC);

function fl_ClickToDrag(event:MouseEvent):void

{
dragMC.addChild(rectangle); // move the objects into the container
dragMC.addChild(circle);
dragMC.startDrag();
}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop); // when I release the mouse

function fl_ReleaseToDrop(event:MouseEvent):void

{
dragMC.stopDrag();
rectangle.x += dragMC.x;         // adjust the positions of the objects for their new location
rectangle.y += dragMC.y;
circle.x += dragMC.x;
circle.y += dragMC.y
addChild(rectangle);                 // move the objects back to the stage
addChild(circle);
dragMC.x = dragMC.y = 0;       // reset the reference for the dragMC
}

All of that repositioning stuff in the Drop function is needed because when you drag the container, the positions of the contents are still at their original coordinates inside the container. So when you drop them they will resume their x/y positions in their new parent, meaning they move back where they were. To reposition them where they were dragged you need to account for the change in position of the dragMC.

Alphabet-Recording · Answer

Argh, it wasn't supposed to show up like that and I can't get it better than that sorry:

rectangle.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag); // when I click the rectangle

function fl_ClickToDrag(event:MouseEvent):void

{

rectangle.startDrag(); // I want both the rectangle and

circle.startDrag(); // the circle to be draggable

}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop); // when I release the mouse

function fl_ReleaseToDrop(event:MouseEvent):void

{

rectangle.stopDrag(); // I want both the rectangle and

circle.stopDrag(); // the circle to stop

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.