# AS to Draw and Drag Multiple MCs on stage

**URL:** <https://forum.kirupa.com/t/as-to-draw-and-drag-multiple-mcs-on-stage/283945>\
**Category:** flash\
**Created:** [March 12, 2009, 8:05pm UTC](https://forum.kirupa.com/t/as-to-draw-and-drag-multiple-mcs-on-stage/283945 "2009-03-12T20:05:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![zik80](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@zik80](https://forum.kirupa.com/u/zik80)\
**Post date:** [March 12, 2009, 8:05pm UTC](https://forum.kirupa.com/t/as-to-draw-and-drag-multiple-mcs-on-stage/283945/1 "2009-03-12T20:05:35Z")

</div>

Hi all:

I need to be able to draw 2 boxes connected with a line when the user clicks on the stage. I also need to be able to drag and reposition any of the boxes.

I got the code below from a sample, which partially works for my need. I added a background MC named mycanvas because I couldn’t get the boxes to draw when I click on the stage of the movie.

What code can I use to do the following:

1. Add the 2 boxes and line at the point the mouse is clicked on the stage
2. Be able to add multiple 2 boxes each time the stage is clicked.
3. Be able to move each individual box to a new position.

Thanks. Here is my current code:

mycanvas.onPress = function() {  
mycanvas.\_root.createEmptyMovieClip(“line”, 1);  
mycanvas.\_root.createEmptyMovieClip(“box1”, 2);  
mycanvas.\_root.createEmptyMovieClip(“box2”, 3);  
mycanvas.\_root.box1.lineStyle(1, 0x000000);  
mycanvas.\_root.box1.beginFill(0xFF0000);  
mycanvas.\_root.box1.moveTo(0, 0);  
mycanvas.\_root.box1.lineTo(0, 20);  
mycanvas.\_root.box1.lineTo(20, 20);  
mycanvas.\_root.box1.lineTo(20, 0);  
mycanvas.\_root.box1.lineTo(0, 0);  
mycanvas.\_root.box1.\_x = 100;  
mycanvas.\_root.box1.\_y = 200;  
mycanvas.\_root.box1.onPress = function() {  
this.startDrag();  
};  
mycanvas.\_root.box1.onRelease = mycanvas.\_root.box1.onReleaseOutside=function () {  
this.stopDrag();  
};  
box2.lineStyle(1, 0x000000);  
box2.beginFill(0x0099FF);  
box2.moveTo(0, 0);  
box2.lineTo(0, 20);  
box2.lineTo(20, 20);  
box2.lineTo(20, 0);  
box2.lineTo(0, 0);  
box2.\_x = 400;  
box2.\_y = 200;  
box2.onPress = function() {  
this.startDrag();  
};  
box2.onRelease = box2.onReleaseOutside=function () {  
this.stopDrag();  
};  
this.onMouseMove = function() {  
line.clear();  
line.lineStyle(1, 0x000000);  
line.moveTo(box1.\_x+10, box1.\_y+10);  
line.lineTo(box2.\_x+10, box2.\_y+10);  
updateAfterEvent();  
};  
};