Joe Hakooz

Pradeep sent me this private message. Moving it here in the forum... I think you need to look at the dragClickables option. dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true. http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/Draggable/ ---------------- Hi, When i apply draggable event on a anchor tag it does not nork for me. eg:- <div>text</div>-- it work for me but when i add anchor tag on text <div><a href="#">text</a></div>-- it not work for me Here you can add anchor tag around the .dragclone div, then it does not work. Thank You in advance. Please help ~Pradeep ----------------------

Interesting. Works great in your demo but in my actual project, throwing now gives a funky rubber band feel. My actual implementation is more complex than a single ball. I'm using a bunch of "cards" that dynamically move around to create infinite scrolling. I'll need to play around a bit on my end and see what I get. Thanks for your help!

Spoke too soon. Looks like there's a possible bug. Using your codepen, throw the ball. Then click on the ball without dragging. Notice how it is returning true for each of the properties. Eventually it stops doing that, but I'm not sure how, when, or why. Is this a bug? The reason it matters is because I'm trying to allow a "mouseup" event ONLY when the draggable is not dragging or throwing. Thoughts?

Yep. Updated to latest version and it works. Thanks!

Hello, I'm trying to detect if my draggable "isThrowing"... https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/isThrowing/ Clearly I'm doing it wrong? Thanks!

Thanks Diaco! Very clever trick. Do you see any performance hit with using D[0].x over this.x ? I ask because my updateDraggable is doing some fairly heavy lifting and I'd love to keep it as optimized as possible.

I've got a draggable that uses the onDrag event. Is it possible to "trigger" the onDrag event from another DOM element? I can do it but inside the event this.x returns NaN. I think onDragScope might be helpful but not sure how. For example... var draggables = Draggable.create(mydraggable, {type: "x", onDrag: updateDraggable }); function updateDraggable(){ console.log(this.x) // should show a number. Doesn't work when triggered by my button. } $('#mybutton').click(function(){ updateDraggable(draggables[0]); // yeah I know, lame attempt by using a parameter. }); Thanks for any suggestions!

Thanks again Diaco!

Thanks Carl. That demo will definitely come in handy! My new issue in another post is performing a hitTest on multiple elements. http://greensock.com/forums/topic/11870-draggable-hittest-multiple-elements/ Once I get that resolved I can forget about jQueryUI's less buttery draggable

I'm surprised I couldn't find more on this. Perhaps my lack of searching skillz ? It appears that using Draggable and hitTest() only tests against a single test object. I tried using a jQuery selector (containing multiple elements) but only the first element is "tested"... Draggable.create($('.dragElement), { onDrag: function () { // dragging if(this.hitTest($('.dropElements'), 10)){ // Problem. This should be testing against more than one element. // over one of the drop zones console.log('hit'); } } }); And if this is possible, how can I know which element was "hit"? Thanks!

Thanks Diaco... again! For the record, onDragStart's this.x and this.y include the minimumMovement pixels. So instead of reverting to 0,0 it might return to 9,3 depending on how fast you dragged the element. Instead of onStartDrag I used onPress which gives me the desired pixels BEFORE minimumMovement kicks in.

Hello, I was wondering if Draggable has a built in way to revert back to its original position on release? For example, if I drag an item and it fails a hitTest on drop, then tween back to the starting point. Just like jQueryUI's draggable. If that functionality is not built in I will probably just keep track of the x,y on drag start and send it home if it fails the hit test on drag end, unless someone has a better idea... Thanks!

Now there are a few good options. Some to get the job done quick (for the memory paranoid) and Diaco's for a more robust solution which attaches TimelineMax instances to each slide. Thanks guys!

I found a solution but it doesn't seem like the most elegant. Please let me know if there is a better way. Again, when killing and re-adding a TimelineMax instance mid animation, things get out of whack. To resolve this I simply seek to the end of the animation just before killing it. Seems to do the trick. tl.seek('-=0'); tl.kill(); I left the Codepen "broken" so people can see what I mean.

Okay... Here is my Codepen. Notice if you click the buttons one at a time and wait for the animations to finish it works. However, if you click between the buttons a few times it breaks the animation. http://codepen.io/jhakooz/pen/BNRoBv

Hello, I have a few divs that will contain separate TimelineMax animations. Only one "slide" is visible at a time. Inside each slide are a few elements that I want to fade in using AutoAlpha... <div class="slide" id="Slide1"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> <div class="slide" id="Slide2"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> In an effort to save memory, I reuse the same variable called "tl" to store my TimelineMax object. After "Slide1" is done I call tl.kill() then re-instanciate it for "Slide2", and so on... The problem is when I go back to "Slide1" I kill then re-attach a new TimelineMax object. But now the animated elements do not appear. Inspecting the code, after an element is supposed to fade in it has the inline style="visibility:hidden" where as the first time TimelineMax gave them style="visibility:inherit". My guess is that TimelineMax appropriately adds the inline styles and everything works well. But the second time "visibility:inherit" doesn't work because they are inheriting "hidden" from the previous TimelineMax animation. Or something along those lines. My question(s) Is there some way to "reset" my elements so they are ready for a new TimelineMax instance? 1. Should I remove all inline styles created by TimelineMax so that I can attach a new instance later on? 2. Perhaps I should just add a TimelineMax instance once to each slide. I'm worried however that this will create memory issues with a large number of slides. 3. Finally, maybe I'm just not using kill() properly? I hope my question is clear. If not I'll try to setup a Codepen. Thanks!

Jonathan, I was thinking the same thing because GSAP is insanely optimized. It has become attractive as a jQuery replacement in some situations. Actually... if GSAP added some optimized DOM selectors, getters and setters, I don't think I'd need jQuery at all... but I understand why you avoid that for file size reasons. Maybe a GSAP selector plugin will show up one day Thanks for the info guys!

Quick question and sorry if it's been answered... If I simply want to add/remove a class name to an element, would performance be better using: TweenMax.set($('.mydiv'),{className:'+=myclass'}) Or jQuery's $('.mydiv').addClass('myclass') I regularly use both libraries so I'd like to start using the more optimized for this common task. Thanks! PS, wrote this on iPad so didn't have access to the WYSIWYG code tool

I finally got this working, but I'm curious... "snap" appears to fire 3 times when you release the mouse. Is that by design? Notes: Works just like the Draggable Spin demo, but allows us to use an array of varying degrees. And since it's a function we can easily execute any other code we want. var dialarray = [0,14,55,87,133,150,222,299,301,330]; // Snap option inside Draggable.create() snap:function(originalValue) { // suppress originalValue to 0-360 var endValue = Math.round(originalValue % 360); // change negative degree to positive if(endValue < 0){ endValue = 360 + endValue; } // get closest value from array var arrayValue = parseFloat(closestDeg(endValue, dialarray)); // get extra rotations to add to our arrayValue var addValue = Math.floor((originalValue - arrayValue) / 360) * 360; // adjust for shortest rotation if((endValue-arrayValue+360)%360>180){ addValue += 360; } return arrayValue + addValue; } // get nearest degree function closestDeg(num, arr) { var ds = arr.map(function( { var d = Math.abs(num - ; return d > 180 ? 360 - d : d; }); return arr[ds.indexOf(Math.min.apply(null, ds))]; }; Thanks again Jack for everything!

Thanks Jack! I was actually considering doing exactly that but thought I was reinventing the wheel (so to speak) so decided to come back to the forum for ideas. I'm now comfortable with where to take this and will post back my code once I have a solution.

First thanks to Jamie and Jack for answering a similar question. Turns out I was asking the wrong question What I'm failing to achieve is something very similar to the Draggable Spin demo... http://www.greensock.com/draggable My requirement has two differences: I need to snap to a bunch of degrees from an array that are not in even increments. For example [0, 88, 185, 268]. I need a callback so I can display information related to the "snapped" degree. You can think of this as the Wheel of Fortune with uneven distances between each pin. A few things to note: I tried supplying an array to the snap option, but once the dial turns more than one rotation, it comes whipping back like it's attached to a rubber band. In addition, I can't use a callback with this technique (I don't think). But the GreenSock Spin demo allows you to spin the dial around and around, and it smoothly lands on a "snap" degree. Thanks for any help!

Thanks Jamie. You are smarter than me... I totally missed the fact that the loop would catch any value. And thank you Jack for dropping the magic modulus operator on me!

Thank you for the fast response! My situation is a little different and I realize now I could ask it a much simpler way, and should probably do so in a math forum... I guess what I'm asking is... For a "rotation" draggable, the "snap" function passes the variable "endValue" which can be any number negative or positive. How do I take "endValue" and convert it to a number between 0 and 360? Thanks again for your help! PS... I believe your solution would only work if the negative or positive endValue was between -360 and 720. endValue could be outside of those bounds. And I'm pretty sure there is some strange built-in math function that is designed for this very situation. I really should have payed more attention in math class!

This is just a math question that I'm struggling to answer... I'm using the Draggable with type: 'rotation'. And I want it to "snap" to degrees I'm providing via an array. The example snap code looks like this: var rotationSnap = 90; snap:function(endValue) { return Math.round(endValue / rotationSnap) * rotationSnap; } Since my "rotationSnap" variable could be any number between 0-360, how can I calculate the return value to always be between 0 and 360?,Specifically when the endValue is negative or higher than 360. Example Issue: Let's say my array contains the values 0, 90, 180, and 270. The problem is that a negative endValue always returns 0 from my array. And an endValue higher than 360 always returns 270 from my array. Extra Info: I have a function that compares endValue to my array and returns the closest number. Thanks for any info and please let me know if I need to clarify.

Thanks for the quick response Rodrigo. I will give these examples a closer look... Joe