Question

I’m developing a drag’n’clone feature for my flash app (AS3 and Flash CS5). The clones are created perfectly, but when I try to drag the clone recently created, the app creates a new clone (and allow me to drag it).

I want to remove this behaviour: clone only should be drag and dropped, not cloned. My code is:

public class Car extends MovieClip
    {

        // imports...

        public function Car()
        {
            addListeners();
        }

        private function addListeners():void
        {
            this.addEventListener(MouseEvent.MOUSE_DOWN,clone);
        }

        private function clone(e:MouseEvent):void
        {
            // Clone the object
            var newcar = new e.target.constructor;
            newcar.graphics.copyFrom(this.graphics);
            newcar.x = this.x;
            newcar.y = this.y;

            this.parent.addChild(newcar);

            newcar.addEventListener(MouseEvent.MOUSE_MOVE,dragCar);
            newcar.addEventListener(MouseEvent.MOUSE_UP,dropCar);
        }

        private function dragCar(e:MouseEvent):void
        {
            e.target.startDrag();
        }

        private function dropCar(e:MouseEvent):void
        {
            e.target.stopDrag();

                    // This line doesn't remove the event, and I don't know why
            e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN,clone);

            e.target.removeEventListener(MouseEvent.MOUSE_MOVE, dragCar);
            e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar);

        }

    }

I hope someone can help me. Thanks!

Answer 1

Here as you are creating a new instance of Car in the clone function, the constructor of that new Car object is called which in turn calls addListeners() and the clone has a MOUSE_DOWN event listener that again clones the clone. That is why you have the problem you describe.

To avoid this you need to add the following line in you clone function (this does not work see below edit)

newcar.removeEventListener(MouseEvent.MOUSE_DOWN,clone);

this removes the clone event listener from the cloned (new) Car instance and avoids cloning again.

Also to start drag you should do it in MOUSE_DOWN instead of MOUSE_MOVE.

Update
OK I see, MOUSE_DOWN is not called Again for the clone, so you need to use MOUSE_MOVE. Thus in this case I would remove the MOUSE_MOVE listener in the listener’s body so that it is only called once.

Update
This seems to remove the event listener.

newcar.removeEventListener(MouseEvent.MOUSE_DOWN, newcar.clone);

You have to refer to the newcar instance’s clone method newcar.clone to remove the event listener.

Working Code
The following code is working just fine

package{
    import flash.display.MovieClip;
    import flash.events.*;
    public class Car extends MovieClip
    {
        public function Car()
        {
            addListeners();
        }

        private function addListeners():void
        {
            this.addEventListener(MouseEvent.MOUSE_DOWN,clone);
        }

        private function clone(e:MouseEvent):void
        {
            // Clone the object
            var newcar = new e.target.constructor;
            newcar.graphics.copyFrom(this.graphics);
            newcar.x = this.x;
            newcar.y = this.y;

            this.parent.addChild(newcar);

            // remove the clone listener
            newcar.removeEventListener(MouseEvent.MOUSE_DOWN, newcar.clone);

            // add dragging listeners
            newcar.addEventListener(MouseEvent.MOUSE_MOVE, dragCar);
            newcar.addEventListener(MouseEvent.MOUSE_UP, dropCar);

            // this is used for dragging the clone
            newcar.addEventListener(MouseEvent.MOUSE_DOWN, dragCar);
        }

        private function dragCar(e:MouseEvent):void
        {
            // if a MOUSE_MOVE event listener is registered remove it
        if(e.target.hasEventListener(MouseEvent.MOUSE_MOVE))
            e.target.removeEventListener(MouseEvent.MOUSE_MOVE, dragCar);
            e.target.startDrag();
        }

        private function dropCar(e:MouseEvent):void
        {
            e.target.stopDrag();

            // do not remove the listener if you want the clone to be dragable
            // e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar);
        }
    }
}

Keep clone dragable
For this in the above code I have added a MOUSE_DOWN event listener for dragging the clone

newcar.addEventListener(MouseEvent.MOUSE_DOWN, dragCar);

And commented out the e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar); in dropCar

Also added a Check before removing MOUSE_MOVE listener as to whether it is there or not, as this function will be called later by MOUSE_DOWN also.