Question

I have an application where a user uploads an image and then transforms it by clicking, dragging and using a resize bar. But my client has asked me to limit where the user can drag to, this is not a problem except I need the limits the opposite way around to what would be considered normal.

So where I have startDrag(false, new Rectangle…) that works just fine, but what I need is to let the user be able to drag outside of the boundaries and not have white space on the inside of the flash file.

What I mean by this is say I have a 500px wide flash file and an image inside it which I’m carelessly dragging around. If the images right hand edge (if I drag left) hits 500px it stops dragging and does not allow them to pull it any further left.

I truly hope I’ve explained this well, any guidance would be awesome!

Below is the code I currently have for the drag events.

Any help would be really appreciated.

public function startImageDrag (e:MouseEvent):void {
        mousePos['x'] = e.target.mouseX;
        mousePos['y'] = e.target.mouseY;
        imageDraggable.removeEventListener(MouseEvent.MOUSE_DOWN, function ():void {});
        photoapp.cStage.addEventListener(MouseEvent.MOUSE_MOVE, moveImage);
        photoapp.cStage.addEventListener(MouseEvent.MOUSE_UP, endImageDrag);
    }
    //The type is wildcarded because I have this hooked to MOUSE_LEAVE too
    public function endImageDrag (e:*):void {
        photoapp.cStage.removeEventListener(MouseEvent.MOUSE_MOVE, moveImage);
        photoapp.cStage.addEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
    }

    public function moveImage(event:MouseEvent):void {
        //Get the offset of the current mouse position over the image
        var
            //The mouse position on the stage
            sxOff:Number = photoapp.cStage.mouseX,
            syOff:Number = photoapp.cStage.mouseY,
            //The position on which the mouse down event was on the image
            reX:Number = sxOff - mousePos['x'],
            reY:Number = syOff - mousePos['y'],
            //The iamge object
            i:DisplayObject = imageDraggable;

        //Move the image
        if (/*I have no idea now...*/) {
            imageDraggable.x = reX;
        }
        if (iY) {
            imageDraggable.y = reY;
        }

        event.updateAfterEvent();
    }

Answer 1

// this code will limit the movement to 100 pixels to the right
var bounds:Rectangle = new Rectangle( 0,0,100,0)
imageDraggable.startDrag( false,bounds );

[EDIT]
Maybe this will help you some more understanding

var boundsWidth:Number  = stage.stageWidth  - pictureHolderMC.width );
var boundsHeight:Number = stage.stageHeight - pictureHolderMC.height );
var bounds:Rectangle = new Rectangle(0, 0, boundsWidth, boundsHeight);
pictureHolderMC.startDrag(false, bounds);