You could use the "snap" option of Draggable. It's the function used to snap the element to a grid, but it could be used for your purpose. It takes a function that returns a 2-elements array containing the coordinates of your draggable element. So if your element is gonna leave a zone, you can avoid it by returning the appropriate values.
Look at the last example on http://www.java2s.com/Code/JavaScript/Ajax-Layer/Draganddropsnaptoabox.htm (it constrains an element to its parent). Hope that helps. JL Le 25 mars 09 à 18:24, Rhyce a écrit : > > 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 -~----------~----~----~----~------~----~------~--~---
