Dragging Sprite Array in Actionscript 3

Question

My goal is to spawn a circle on the MOUSE_WHEEL event, and move all of them when a dragging occurs, as detected with MOUSE_DOWN and MOUSE_UP. I've done this by adding each Sprite created into an array, and iterating through it when mouse up/down. Note: Node is just an extension of the Sprite type.

However, for some reason, only the most recently drawn Sprite in the array is being moved. Any ideas why?

My Canvas class:

    public function Canvas() {
        trace("Starting it");

        const background:Sprite = new Sprite();
        background.graphics.beginFill(0x00000000);
        background.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
        background.graphics.endFill();
        addChild(background);

        background.addEventListener(MouseEvent.MOUSE_WHEEL, createNode);
        background.addEventListener(MouseEvent.MOUSE_DOWN, startObjectMove);
        background.addEventListener(MouseEvent.MOUSE_UP, endObjectMove);


        mNodeList = new Array();
    }
...
}

My startObjectMove and endObjectMove methods:

        public function startObjectMove(pEvent:MouseEvent) : void {
        trace("Starting drag...");
        trace("There are " + mNodeList.length + " in list");
        for (var i:int = 0; i < mNodeList.length; i++) {
            var node:Node;
            node = Node(mNodeList[i]);
            node.startMove(pEvent);
        }
    }
    public function endObjectMove(pEvent:MouseEvent) : void {
        trace("Ending drag...");
        trace("There are " + mNodeList.length + " in list");
        for (var i:int = 0; i < mNodeList.length; i++) {
            var node:Node;
            node = Node(mNodeList[i]);
            node.endMove(pEvent);
        }
    }

The endMove and startMove methods simply call this.startDrag() and this.endDrag().

Answer 1

You can only use startDrag and stopDrag on one object at a time.

You need to listen for mouse down events on the stage itself - when the user clicks, store the initial position of each node (create two public vars/properties in the Node class), and also record where the mouse starts out.

Then, whenever the mouse moves until it's released, work out how far it's moved since mouse down, and add this amount to the initial position of each node to set its position.

You need to do something like this:

var initX:int;//Variables to store the mouse position on click:
var initY:int;

stage.addEventListener(MouseEvent.MOUSE_DOWN):void {

    initX = stage.mouseX;//Store the starting mouse position
    initY = stage.mouseY;


    //Store the node positions:
    for(var i:int = 0; i < mNodeList.length; i++){
        var node:Node = Node(mNodeList[i]);
        node.startX = node.x;
        node.startY = node.y;
    }

    //Listen for mouse move events
    stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}


stage.addEventListener(MouseEvent.MOUSE_UP):void {
    //Stop listening for mouse move events
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}



//MouseMove event handler:

function mouseMove(e:MouseEvent):void{
        for(var i:int = 0; i < mNodeList.length; i++){
                var node:Node = Node(mNodeList[i]);

                // Position each as amount the mouse has moved 
                // to each node's initial position:

                node.x = (stage.mouseX-initX) + node.startX;
                node.y = (stage.mouseY-initY) + node.startY;
        }

}