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 prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---