I'm trying to figure out how to drag items with the confines of a particular component (in this case a canvas object). I've tried a number of different approaches including setting the bounds property of the startDrag method to the rectangle defined by calling getRect() on the parent, but I must still be doing something wrong.
My ultimate goal is to be able to drag and drop items from a list onto a canvas container, have the container respond to the drop event and add the object to its' children. Then allow for the objects to be dragged around within the canvas, limiting their movement to the canvas' area. Below is a very simplified version of what I am trying to achieve. You'll notice that when you drag the blue box, you can drag it anywhere on the stage (not just within the canvas area). Then when you release it, it is dropped within the canvas, the canvas' mask kicks in (hiding the dragged object) and scrollbars are added since the object is outside of the viewable area. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" verticalAlign="middle" horizontalAlign="center"> <mx:Script> <![CDATA[ private function dragIt(event:MouseEvent):void { event.target.startDrag(); } private function dropIt(event:MouseEvent):void { event.target.stopDrag(); } ]]> </mx:Script> <mx:Canvas width="600" height="600" backgroundColor="#FFFFFF"> <mx:Canvas x="10" y="10" width="100" height="100" backgroundColor="#1A7394" mouseDown="dragIt(event);" mouseUp="dropIt(event)"> </mx:Canvas> </mx:Canvas> </mx:Application> THANKS!
