martis

Thanks that seemed to work

Hey guys, I downloaded the latest release and replace ONLY the draggable JS and my objects are not dragging now. I replaced Draggable 0.9.0, any ideas why the new version is not working or has different setup? Thanks

I tried the multitasking gestures on my site and it seemed to fix it! Not a huge deal, but I did notice that if you tab off a site with draggable (ipad), and tab back onto the site with draggable it takes a second or two for the draggable instance to pick up interactivity. I wonder what the cause of this is?

That worked, thanks Jack! Gonna use this approach to prevent over flooding of scroll events

Thanks, I will look into how to capture the event where you lose/gain focus on a page in iOS, anyone have experience with this?

Good question, I have had a few issues where I change tabs with different draggable objects and i sometimes cannot get interactivity back.

Fixed! It now correctly checks ancestor nodes

Hey Jack, I got the new update of Draggable and this is indeed fixed! fiddle with fix: http://jsfiddle.net/martis/2ZDf8/8/ Great work once again!

Thanks for the detailed reply Jack, I noticed the tick listener only fires when there is an active change in the tween engine... Can you post a simple example of how to have a persistent tick listener, even if no engine update occurs?

Hey guys, I currently have a page scroll event that is firing off a timeline update, but it seems like it is firing quite often. I was wondering if someone had a more optimized solution that uses either ticker or delayedCall that utilizes the requestAnimationFrame to drive my timeline? I notice the Ticker only updates when the tween engine is in progress, I need the event to fire off whether or not the tween engine is currently running to check page scroll. Thanks! onScroll: // Setup Scroll Events function setupScrollEvents() { $(window).scroll(function(event) { processTimeline(); }); } Vs something like... // Setup Ticker Events function setupTickerEvents() { TweenMax.delayedCall(0, checkIfPageScrolled); }

I made a fiddle that illustrates the problem. Notice that the onclick is inside the trigger, you can see the target jump then for some reason the onThrowUpdate is getting called and not honoring the update() http://jsfiddle.net/2ZDf8/7/

Not changing the Y while dragging Let me look at codepen and try to get an example up, never done one before

I changed my code and got the update() to work, but when I start to drag again it is not honoring the newly updated "y" position, defaults back to 0, as if it never moved... yPos = 1000; TweenMax.set($proxy, {css:{y:yPos}}); var draggable = Draggable.get("#proxy"); console.log('draggable before update: ' + draggable.y); // returns 0 draggable.update(); console.log('draggable after update: ' + draggable.y); // returns 1000 onDrag:function () { console.log('drag: ' + this.y); // defaults at starting at 0, even after update },

Thanks, I update the y position manually, try to call update() on the draggable instance to sync it, then Draggable is firing off onThrowUpdates after the click event happens, but the y position I set is not syncing with the y position on the draggable instance. I am trying to call update() but am not having luck... TweenMax.set($proxy, {css:{y:yPos}}); var draggable = Draggable.get("#proxy"); draggable.update(); console.log('update: ' + $proxy.position().top); // reports the correctly updated y position onThrowUpdate:function() { console.log(this.y); // does not report the update, remains at 0 if i haven't scrolled the page processMobileTimeline(this.y); },

Hey Jack, Just discovered a pretty fringe case, but it breaks draggable objects on iPad On the iPad you can perform "4 or 5 finger gestures" on Apps (Safari) -Pinch to Home Screen -Swipe up to reveal multitasking bar -Swipe left or right between apps After you perform any of these actions and come back to the webpage with the draggable object on it, it somehow loses all interactivity (you no longer can interact with the draggable object). Not sure how you would even approach this bug, but wanted to bring it to your attention. Thanks again for all the awesome work on Draggable!

Hey, this issue resolved with the new draggable... thanks

Hey guys, Been loving the new draggable, had a hopefully simple question. What is the best way to manually set the "y" position on a draggable object with a trigger? I am basically wanting to hyperlink within my draggable object (jump to a position). Do I move my trigger or the actual draggable target itself? Thanks! Code below: Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), trigger:$('#site'), force3D:true, zIndexBoost:false, edgeResistance:.8, throwProps:true, onDrag:function () { processMobileTimeline(this.y); }, onThrowUpdate:function() { processMobileTimeline(this.y); }, });

Hey Jack, I was able to get click events working on an element inside the containing div, but not the containing div itself... <!-- HOBO --> <div id="hoboMain" class="imageHolder"> <img id="hoboImage" class="singleImage" src="img/image-main.jpg" alt="image-main" width="1000" height="815" /> <div id="introCoverTop" class="coverTopStatic"></div> <div id="introCoverBot" class="coverBotStatic"></div> </div> .imageHolder { position: relative; overflow: hidden; text-align: left; width: 1000px; height: 815px; margin: 0px auto 90px auto; } .singleImage { position: absolute; } Works: $hoboImage.attr("data-clickable", "true"); $hoboImage.click( function(event) { alert('clicked'); }); Does not work: $hoboMain.attr("data-clickable", "true"); $hoboMain.click( function(event) { alert('clicked'); });

Ahh, thanks for the clarification. I will hook up the new draggable and play around with it more tomorrow. Thanks again for being so helpful Jack!

I got the new draggable version hooked up and tried a simple test on the top image of my site... $hoboMain.data( "data-clickable", true); $hoboMain.click( function(event) { alert('clicked'); }); I get the alert in a desktop browser, but no go on iOS, any ideas? here is the CSS for that element... .imageHolder { position: relative; overflow: hidden; text-align: left; width: 1000px; height: 815px; margin: 0px auto 90px auto; } This site: http://thegeminisociety.com/gia_proxy3/

Very cool Jack, I will give this a shot today, thanks!

Is this still the case with draggable? You have to define the events in the HTML with onClick? Is there a way assign the onClick events using jQuery?

Hey guys, Wanted to know what the most efficient (performance wise) way of setting the playhead manually on a timeline was? Right now I am using: myTimeline.time(value); Thanks in advance

Thanks Rodrigo, Will give this a shot! Is there a way to check the force3D setting on an object? UPDATE: I tried this and am still seeing that the Site Layer is rendering as if its a force3D:true object http://thegeminisociety.com/dragTest_proxy4/ // Setup Draggable function setupDraggable() { TweenMax.set($proxy, {css:{height:$site.height()}}); Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), force3D:true, trigger:$('#site'), zIndexBoost:false, edgeResistance:0.5, throwProps:true, onDragStart:function () { TweenMax.set($site, {force3D:false}); }, onDrag:function () { processMobileTimeline(this.y); TweenMax.set($site, {force3D:false}); }, onThrowUpdate:function() { processMobileTimeline(this.y); TweenMax.set($site, {force3D:false}); }, }); } Jack, any clue why the trigger is performing like a force3D object? Thanks.

I got the trigger working... which now allows interaction to come through, but for some reason the trigger (site) is performing like it has force3D:true on it, even though it is only the trigger? Does Draggable automatically make the Drag object AND the trigger force3D true when it updates? Getting closer... http://thegeminisociety.com/dragTest_proxy2/ // Setup Draggable function setupDraggable() { TweenMax.set($proxy, {css:{height:$site.height()}}); Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), force3D:true, trigger:$('#site'), zIndexBoost:false, edgeResistance:0.5, throwProps:true, onDrag:function () { processMobileTimeline(this.y); }, onThrowUpdate:function() { processMobileTimeline(this.y); }, }); //TweenMax.set($proxy, {force3D:true}); }