StartDrag problem?

Question

I'm building a simple map application, where users can click
on the map and drag it around. Pretty basic idea. The map is an
extended Canvas, nested inside of a parent container which is also
a Canvas. When someone clicks on the map, I call startDrag, and on
release I stop it. Still pretty basic. The problem I'm having is
that whenever a user clicks on the map, they can sometimes drag the
map right outside of the parent container. I'm not sure how to fix
this, is it a bug? Or am I missing something?
I've put together a simple example of what I'm talking about.
http://webdojo.net/flex/
If you click on the red square and drag it, I want that to
stay in the white square. It makes sense to me that it should be
default, but you can drag the red square out of its parent. Notice
when you release it goes back into its parent, and you see
scrollbars to its position.
Here's the source view:
http://webdojo.net/flex/srcview/
I've tried setting clipContents to true on the parent Canvas,
but it seems to do nothing. Any ideas?

Answer 1

Im getting the problem now.
The problem is, when i release the mouse with other MC in
front of mine he doesnt drop it and the mc stay following my mouse.
I thought that by using the getNextHighestDepth i would solve
it, but guess not :(
Any idea how to do this please?
I am using object to make the mouse stuff like:
var meuObject:Object = new Object();
meuObject.onRollOut = function(){
apagarTexto();
meuObject.onPress = function(){
var novaDepth= this.getNextHighestDepth();
this.swapDepths(novaDepth);
this.startDrag();
meuObject.onRelease = function() {
botoes(this);
for (i=0;i<6;i++){
var newDepth = this.getNextHighestDepth();
var newMC:String = "botaoMenu" + String(i);
this.attachMovie(newMC,newMC,newDepth,meuObject);
}