Ratchet

Hi Jack, I totally understand... I will hack my own way around it It would be a nice (and quite logical) feature though to have pinch zooming out of the box, then it could completely replace popular (but flawed) hacks like iScroll. Just an idea for the future. Thanks again!

Hi Jack, I checked it out and it does the job, awesome work! 2 remarks: - I update the dragResistance of each node at runtime by directly setting the .dragResistance property, is this the recommended way or is this 'hacky' (i.e. should there be a setter function)? - I actually needed a negative dragResistance because I decided to scale the contents down rather than up. I found out that setting it to -1 works to speed up the dragging by a factor 2. So it's fine by me, I'm happy it's supported in the first place, though it feels a bit unintuitive to put a negative number. A bit unrelated: What is the recommended way to scale the contents of a "scroll" without increasing the scroller itself? there are some unexpected things happening when I scale the contents of a "scroll" draggable using css transforms (i.e. the scale property). Because I don't want the draggable container itself to scale, I put everything in a wrapper div which I scale with TweenLite. However, zooming in and out (by multiple doubleclicks), the width of 'your' injected wrapper does not revert back, not even after disable and re-enable, hence the scrollable area is way too big. Also, this behavior is browser specific (on iPad it does resize itself back, on Chrome it doesn't). You can see this behavior if you doubleclick twice in the following example, and then pan to the right (there is a black area). Additionally, the edgeResistance at the bottom and right edge seem to reset to 1 in the process. http://codepen.io/ratchet/pen/Ihmgz (dragResistance obviously does not work in this example since the library is loaded from the cdn)

Wow, I didn't anticipate this level of service, thanks Jack! I will check it out as soon as I have the time....

Looking at the Draggable source code, I think it would be very simple for the developers to implement it in Draggable directly. Look at it as a kind of dragResistance property, similar to the edgeResistance. Then basically the GreenSock developers need to change these lines in their internal onMove callaback (line 712) yChange = (e.pageY - startMouseY)*dragResistance; xChange = (e.pageX - startMouseX)*dragResistance; I would then simply need to feed a new dragResistance (=1/zoomFactor) to the child draggables each time the zoom level changes. A dragResistance property could also be desirable in some situations when you dont want the object to follow the mouse.

Thanks a million, rhernando, your fiddle was really helpful!!! I am getting close to what I want in this fiddle: http://codepen.io/anon/pen/spiqK However, here I also implemented a zoom on the contents upon doubleclicking BUT after zooming 2x, the dragged distances are (again) multiplied by two. Do you or anyone else know of some way to avoid that? Also, I would like to implement pinch zooming (with two fingers) on the parent draggable, is this a viable option?

Hi there, I consider using Draggable in my mobile game (either with or without throwprops), in a similar fashion to games like WordFeud: a draggable stage with draggable tiles on it. For this it seems most logical to have draggable objects inside a div that is itself draggable. This seems to work somewhat, though when I drag the tile, the draggable stage also moves (hence the tile itself moves twice the dragged distance). it seems easiest to cancel propagation of the event using the onDragStart callback, however it seems that no event object is passed into this callback so I cannot call e.stopPropagation(). Who has an elegant solution for nested draggables? By the way, I also tried temporarily .disable() on the top draggable but that gave serious javascript/dom errors. Here is my code so far. HTML: <div id="scrollContainer"> <div id="scroller" style="overflow: visible; padding: 0px; position: relative; height: 300px; width: 300px;"> <div id="tile0"> <img src="img/tile_0.png" style="position: absolute;top:0"> </div> </div> </div> And js: Draggable.create("#scroller", {type:"scroll", edgeResistance:0.5, throwProps:true}); Draggable.create("#tile0", {type:"x,y", edgeResistance:0.65, onDragStart: function(event){ //event not available here? }});