martis

Hey guys, Was wondering if anyone has a solution for controlling a draggable instance using mousewheel and the arrow keys? I saw this post that explains how to control the scrollbar using mousewheel http://forums.greensock.com/topic/7327-custom-mousewheel-scroll-with-scrollto-plugin/?hl=mousewheel but nothing in regards to Draggable. I would love to use ThrowProps, and snapping in the solution. Thanks!

Thanks Rhernando, I am running into one issue where I drag the draggable to the final snap spot. I swipe up again, but it snaps DOWN the snapIndex (I basically want it to not do anything). Tried looking at the math, can't figure out why the endValue is now less (is it because its at its max Y position)?

Hey guys, I ended up using this solution, since I wanted to track if the snap was moving forward or backwards... works pretty well, would love any input on how I could improve/optimize! // Setup Draggable function setupDraggable() { TweenMax.set($proxy, {css:{height:Math.round(tl.totalDuration() * pixelScroll) + $window.height() + "px"}}); TweenMax.set($proxy, {css:{visibility:"hidden"}}); drag = Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), trigger:$('#site'), force3D:true, dragClickables:false, zIndexBoost:false, edgeResistance:.8, dragResistance:.1, throwProps:true, minDuration:2.5, maxDuration:4, overshootTolerance:0, snap: { y: function(endValue) { if (!snapping) { console.log("snap"); snapping = true; var lastEndValue = snapPoints[snapIndex]; if (endValue < lastEndValue+10 && snapIndex < snapPoints.length-1) { snapForward = true; snapIndex++; } else if (endValue > lastEndValue-10 && snapIndex > 0) { snapForward = false; snapIndex--; } } return snapPoints[snapIndex]; } }, onDragStart:function() { snapping = false; }, onDragEnd:function() { if(snapForward == true) { drag.vars.minDuration = 4; drag.vars.maxDuration = 6; } else { drag.vars.minDuration = 1; drag.vars.maxDuration = 3; } if(this.tween.duration() < drag.vars.minDuration) { this.tween.duration(drag.vars.minDuration); } if(this.tween.duration() > drag.vars.maxDuration) { this.tween.duration(drag.vars.maxDuration); } console.log("end"); console.log("max: " + drag.vars.maxDuration); console.log("min: " + drag.vars.minDuration); console.log("snapForward: " + snapForward); console.log("duration: " + this.tween.duration()); snapping = false; }, onDrag:function () { processMobileTimeline(this.y); }, onThrowUpdate:function() { processMobileTimeline(this.y); } })[0]; }

Thanks for the reply... Only problem is I am calculating the maxDuration based on the direction the draggable is moving, so it happens mid snap calculation. 8(

Hey guys, I have a reference to my Draggable object (drag). Is there a method or way to update the maxDuration after setup has occurred? Thanks..

Heya, Any plans to release TransformAroundPointPlugin for JS? Anyone have an example of an element rotating around a fixed point in JS? Thanks!

Nice work Jack! That seemed to of killed any sort of overshooting while using my custom snapping with overshootTolerance:0 !

Thanks Carl, Any clue where I can find the default throwProps config? I literally only want to change the overshootTolerance Here is my current code: drag = Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), trigger:$('#site'), force3D:true, dragClickables:false, zIndexBoost:false, edgeResistance:.8, dragResistance:.5, throwProps:true, minDuration:.75, snap: { y: function(endValue) { if (!snapping) { snapping = true; var lastEndValue = snapPoints[snapIndex]; if (endValue < lastEndValue+56 && snapIndex < snapPoints.length-1) { snapIndex++; } else if (endValue > lastEndValue-56 && snapIndex > 0) { snapIndex--; } } return snapPoints[snapIndex]; } }, onDragStart:function() { snapping = false; }, onDragEnd:function() { snapping = false; }, onDrag:function () { processMobileTimeline(this.y); }, onThrowUpdate:function() { processMobileTimeline(this.y); } })[0];

Hey guys, Is there a simple way in the Draggable config to set overshootTolerance to 0? I have snapping, minDuration, and throwProps on and don't want my object to overshoot the target. Thanks!

Hey guys, I had two quick questions about snapping with Draggable. Let's say I have an array: [0, 100, 200, 350, 500]; 1. Is there a way to force Draggable (w/ throwProps) to only snap *one* array value from the original value? Meaning if my object is at 200, no matter how hard i flick it, it will only snap to 100 or 350? Not 0 or 500. 2. Also, Is there a way to honor the direction the object is traveling and snap up or down in array based on the direction even if the velocity would not of actually carried the object closer to the next array value? I don't want the object to ever snap back to its original drag position, rather I want the object to go forward or backward in the snap array. Thanks!

Thanks Jamie! http://jsfiddle.net/9c4we/2/ Works like a champ

I like using CODA2 on mac: http://panic.com/Coda/

Hey guys, I am trying to enable both click and drag on an element inside a Draggable. Thanks to jamie's great solution: http://codepen.io/jamiejefferson/pen/Inolp I was able to get things working (minus android) If you take a look at my fiddle: http://jsfiddle.net/78eDH/ You will notice that the red square both drags and clicks as it should using the trueClick() check. TrueClick() works great for both desktop, and iOS, but fails in Chrome and Firefox on Android. trueClick() always returns TRUE on android, whether or not I moved 2 pixels or 200 pixels. I imagine that chrome and firefox on android are not returning proper values for positionEvent/pageX/pageY? Any help would be much appreciated. (Even a better way to handle the trueClick). Thanks!

Sure thing... really appreciate your help on this and I really do just want Draggable to be the best possible! I have the exact same site minus the Draggable versions (0.9.0 and 0.9.6) http://thegeminisociety.com/gia_90/ http://thegeminisociety.com/gia_96/ NOTE: The draggable is only on iphone/ipad/android The whole site is a draggable instance.. Scroll down to the IMAGES button, click on that, you can click through the photos at that point. Notice in 0.9.0 you can click and drag on those two elements. In 0.9.6 you can only drag on them, not click

Totally appreciate the work around Man, that's too bad, I am 100% positive that in version... * VERSION: 0.9.0 * DATE: 2013-09-18 That an object with a click event and "data-clickable", "true" could be both clicked and dragged on. I only have the .min version of 9.0, wanted to dig though the code and see what allowed both.

Ah yes, I do see the events on iOS and Android (what I call mobile). Thanks so much for offering up this solution! Jack, I remember in previous versions 9.2 or abouts that this actually worked right out of the box. I assume the implementation of the dragClickables boolean changed the functionality. Would you ever consider implementing something that allowed you to click AND drag on "links" like Jamie posted? Thanks!

Thanks for the solution Jamie! Works great on desktop, not getting the click events on mobile though, any clue?

Thanks for the reply Jamie, Sorry my example may of been too simple. I actually have many objects inside my Draggable Instance. So just imagine I have 100 squares inside a Draggable instance. All those squares have onclick events on them. I want to be able to click the squares which fires their onClick event (can achieve this by using dragClickables:false) Now where this breaks down is I still want to be able to touch and drag on the squares themselves to move the Draggable as normal (cannot achieve this while using dragClickables:false). If set dragClickables:true then I lose my onclick events on my squares. Catch 22! Thanks!

Hey guys, Quick question about the new dragClickables option for draggable... Everything is working as it should, but I want to enable BOTH a click and a drag on an object. Just imagine I have a slide show, and I want to be able to click on the current image to go to a link AND still be able to drag on the image to go to the next one. Thanks!

That fixed it, thanks so much for looking into it Jack!

Really? Try this: http://jsfiddle.net/YQe5Z/5/ The square div can be clicked and drag, but the text cannot.

Here is the JSFiddle - http://jsfiddle.net/YQe5Z/2/

I will work on a fiddle, in the meantime here is my test page... http://thegeminisociety.com/scroller/ Notice if you select the gray background it scrolls, but not the text contained within. I have no interactions setup that may interrupt the draggable.

They are just divs with embedded font inside of them... lemme try adding the data-clickable="false"

I got the draggable working by replacing all the other files... (I am using TweenMax) I did notice one other thing... The object will not drag if I "grab" divs inside of the draggable object. I have to "Grab" the background of the draggable object. Was this a change?