I'm trying to use the Draggable functionality of script.aculo.us and
restrict the draggable behavior to a specific area. I can't find any
way to do this in the documentation and I was wondering if anyone had
any ideas how this could be done.

The setup is this: There is an image and a floating rectangle that can
be dragged over the image. Naturally, I want to restrict the draggable
area to that of the image. I am currently doing something like this:

new Effect.Appear('croppingRectangle', {from: 0.0, to: .5});

        //position it over the image
        Element.clonePosition('croppingRectangle', 'croppableImage',
{setWidth: false, setHeight: false, offsetLeft: 1, offsetTop: 1})

        //enable drag.
        new Draggable('croppingRectangle', {onDrag: function
(theDragableObject, evt){

                var cropPos = Position.cumulativeOffset($('croppingRectangle'));

                console.log("X=%d, Y=%d", cropPos[0]+510, cropPos[1]+187);

                if(Position.within($('croppableImage'), cropPos[0]+510, cropPos
[1]+187) && Position.within($('croppableImage'), cropPos[0], cropPos
                        console.log("Not within.");



This appears to work---UNTIL I hit a corner. Then I get an exception
in prototype.js, saying that "event is undefined" when it tries to
call event.previewDefault().

I guess what needs to happen, is I need to gain access to the new
position BEFORE the move, but I don't see a way to do that. Any help
would be greatly appreciated.

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to