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
[1])){
console.log("Within.");
}else{
console.log("Not within.");
theDragableObject.endDrag();
}
}});
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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
