Search the Community

Hi Folks, I am not sure this is a GSAP issue, but it is only happening to draggable elements in my project. I apologize if I missed something obvious, but I've hit a dead-end. My project uses draggable buttons of various sizes in a graphical test environment. This project has been running fine for a year but now it is giving me trouble only on my Android Nexus 7 test tablet. Everything works great on iPad and all modern desktop browsers in Mac & Windows. Take a look at the two images I have attached. The "draggable_sample_correct.jpg" image shows what the 3 draggable buttons should look like. The "draggable_sample_Android-bogus.jpg" image shows what it looks like on my Android device. I noticed that the transform: translate3d style is altered. I can't figure out where this transform is coming from in the first place, and why it's different on Android in the second place! The dragging behavior is inconsistent as well. On Android, when I drag one of the buttons onto a target and let go, it sometimes goes to its correct home position... at other times, it goes to a new incorrect position. Here is my setup and onDrop functions, which have not been touched for a year. This used to work on this same test tablet, but now I'm wondering if some update to Android has caused the problem? var setupDroppables = function(theDropClass) { // DRAG N DROP var droppables = $(theDropClass); var overlapThreshold = "50%"; var targetContainerDiv = "#singleVtarget"; switch (theDropClass) { // There are several styles of drag & drop question layouts. case ".threexDnDsideBySide": targetContainerDiv = "#threeUpVtargets"; break; case ".twoxDnDsideBySide": targetContainerDiv = "#twoUpVtargets"; break; case ".blueDnD": targetContainerDiv = "#singleVtarget"; break; case ".twoxDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".threexDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".scenarioSel": targetContainerDiv = "#singleVtarget"; break; } Draggable.create(droppables, { bounds:window, onPress:function() { TweenLite.set(targetContainerDiv, {autoAlpha: 1, display: "block"}); }, onDrag: function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest($(targetArray[i]), overlapThreshold)) { console.log("we're on it!"); $(targetArray[i]).addClass("highlight"); } else { $(targetArray[i]).removeClass("highlight"); } } }, onRelease:function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest(targetArray[i], overlapThreshold)) { onDrop(this.target.id, targetArray[i]); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); $EV_SoundManager.playSFX("throb018"); return; } } $EV_SoundManager.playSFX("throb018"); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); } }); }; // FLASH THE BORDER IF THE CORRECT DROP var onDrop = function (dragged, dropped) { var thisSelection = dragged; var thisPos = targetArray.indexOf(dropped); var correctChoice = correctChoices[thisPos]; var thisIndex = buttonArray.indexOf("#" + thisSelection); if (thisSelection == correctChoice) { isCorrect = true; if (jQuery.inArray( thisSelection, correctQuestions ) == -1 ) { correctQuestions.push(thisSelection); } animateMsg(questionArrayRandom[currentQuestionIndex], correctStatements[thisIndex]); TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true}); } else { isCorrect = false; incrementAttempts(); animateMsg(questionArrayRandom[currentQuestionIndex], incorrectStatements[thisIndex]); hideTargetVContainerDivs(); $(dropped).removeClass("highlight"); } }; Any insight or leads for solving this are greatly appreciated. Thanks! --Kevin

Hello, in my script im using a draggable for navigation. In the throwProps-callback the draggable is disabled. Now i want to enable it in an oncomplete callback of my timeline, but itis doing nothing. I can log the draggable instance but calling the method isnt affecting anything. The draggable stays disabled. After every section in my timeline my timeline callback is called. Then I want to enable my dragger to grant navigation. OnThrowPropsComplete I want to disable the dragger and navigation to dont disturb the timeline. Draggable instanciation: draggerInstance = Draggable.create($dragger, { type: "y", bounds: "#drag-container > div", overshootTolerance: 0, throwProps: true, onThrowComplete: function() { hideSwiperButtons(); wasDragged = true; var itemNo = getDraggerItemNo(this.y); tl.seek(sceneLabels[itemNo]); $dragger.removeClass("active"); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 0, delay: 0.01, ease: Expo.easeOut, onComplete: function() { $menuContainer.removeClass("active"); currentTween = tl.tweenTo(sceneLabels[itemNo + 1]); currentScreen = itemNo + 1; } }); this.disable(); //Disable dragger here to prevent navigation while tweening }, snap: { y: function(endValue) { return getDraggerItemNo(endValue) * gridHeight; } }, maxDuration: 1, onDragStart: function() { $dragger.addClass("active"); $menuContainer.addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 1, ease: Expo.easeOut }); }, onDrag: function() { var itemNo = getDraggerItemNo(this.y); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active") } }); TimeLine onComplete callback function onCompleteTimeline() { //draggerInstance is accessable from here draggerInstance[0].enable(); //not working tl.pause(); }

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!

Here is a solution to dragging and reordering divs, vertically. I was wondering if someone could check my code and see if there is anything I can optimize? ( Original idea was from Blake http://codepen.io/osublake/pen/zxZQXX )

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!

What is the correct loading order for GSAP utilities? I see demo's that linger around in varied flavors and all seem to work. Does order really matter in terms of loading? Is it suggested that TweenMax goes before Draggable? or vice versa?

Please Help Guide on this issue. Thanks in advance to those that pitch in Here's an example demo (still private) I'm creating to show how Draggable can be used to create an off canvas menu. http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94 A couple issues I'm running into: 1. The red bg is to show the target region. I want the menu to allow drag actions to open the menu when a user's finger drags over the top of the document (not just a small portion of a region). The menu also hides completely when it's closed. The previous example linked in my demo from Carl's original pen had the menu showing 15 pixels when closed. Need some guidance on how to improve the current demo I'm building. 2. Links in the main document body are not clickable and I think I'm missing the explanation in the docs. Maybe some direction how to make these elements clickable so the menu swipe region does not negate those clickable items.

I want Drag & Copy use GSAP Draggable solution

Hello, is there a possibility to manually set the position of my draggable element? I want to use it as an scrollbar that move synchronized with my timeline and it should automatically get updated when the timeline continues. Ive already added an onUpdate handler to my timeline and an onDrag handler to my draggable with all the calculations already implementet. I just dont know how I can set the position of my draggable. My Markup is the following: <nav id="drag-nav"> <div class="dragger"></div> </nav> Javascript: $dragNav = $("#drag-nav"); draggerInstance = Draggable.create(".dragger", { type: "y", bounds: $dragNav, onDrag: onDragHandler })[0];

Just wanted to know if there was a way to implement two finger or three finger swipe with a draggable element. I haven't come across this in any of the documentation or forums just yet. Thanks.

So, I was trying to implement Fancy's rotation approach found here: http://codepen.io/MAW/pen/doPLME. But, it only every applies to one object. How can I get all objects to rotate when a user selects that object and pulls it around, if that makes sense? Also, I've been having trouble deleting an object and thought something Draggable.disable() or something would work but doesn't seem to. Thanks for your help - I'm a total newb to greensock so its much appreciated!

Hi, What is the best way to create a draggable that is setup like a seating chart in the image I have attached (i.e. where the rows are curved etc.)? Thanks for your help!

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!

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!

Can I set the properties on a Draggable after it's been initialized? I'm passing some objects between quite a few classes, and I have to recreate and then disable certain Draggables. For instance... the zIndexBoost attribute. I typically want it to be true, but occasionally I want it false. Is there a way to set it after calling Draggable.get(node) and enabling it?

I'm an admitted newbie Greensock user/member. I use Edge Animate and have incorporated Draggable into a very simple interactive component. I typically learn with simply trying different things and looking at what others have done. It's steep learning curve thing to do, but I just keep plugging away at it. I'm trying to solve a parent/child issue. I have a larger circle that has a smaller "wedge" layered on top. I can rotate both symbols independently but ultimately I want the lower layer (the larger circle) to rotate the child wedge. The wedge should be able to be moved independently of the larger circle. I'm looking at all kinds of ways to solve this, but thought I'd try asking for help too. The very simple js code is pasted below...it works just fine rotating my "dial" (the large circle) with my "index" (the wedge). Any suggestions would be appreciated as I tinker with the code. I'll upload something to Codepen as soon as I get that figured out too! Thank you for any help or suggestions! Ed /*********************** * Adobe Edge Animate Composition Actions * * Edit this file with caution, being careful to preserve * function signatures and comments starting with 'Edge' to maintain the * ability to interact with these actions from within Adobe Edge Animate * ***********************/ (function($, Edge, compId){ var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes //Edge symbol: 'stage' (function(symbolName) { Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) { Draggable.create("#Stage_dial",{type: "rotation"}); Draggable.create("#Stage_index",{type: "rotation"}); }); //Edge binding end })("stage"); //Edge symbol end:'stage' //========================================================= //Edge symbol: 'dial' (function(symbolName) { })("dial"); //Edge symbol end:'dial' //========================================================= //Edge symbol: 'index' (function(symbolName) { })("index"); //Edge symbol end:'index' })(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-3280152");

I am using a Windows 8.1 hybrid device and IE 11. If I create a Draggable with type:'x', it doesn't work. I created a CodePen to demonstrate this. I have to touch and drag about 3 times before it works. It works fine with a mouse.

Hello folks - We are attempting to use Greensock/draggable to achieve smooth, swipe based transitions between full viewport tiles on a canvas. This is a for a web app and we are designing for mobile. Unfortunately, so far the transitions are not at all smooth. We're new to the package, and it's entirely possible that we're managing our settings poorly or that we are asking too much of it. The symptoms we're seeing right now are: Canvas doesn't respond quickly to the initial tap to swipe. There is a short initial delay, which doesn't feel good to the user. Canvas snaps back when you swipe it quickly, instead of continuing it's movement to the next tile. This is most noticeable when you attempt a quick, short swipe. Canvas sometimes take 3-5 seconds to recalculate after an attempted movement, producing a significant freeze period. You can see the live production app here: http://plow.io We've posted a simplified codepen example above. Any tips would be _greatly_ appreciated! Thanks, Colin

Hello, I am implementing a basic resizeable object which works perfectly (without using scaling). When I add some scaling to the resizing object then I feel drag resistance when resizing. The resistance happens when I resize, not when I drag the box, also the object top left moves leftward and does not fully enlarge or shrink following the mouse. Do you have any idea on how to correct for the scaling factor so that the resize handle nicely follows the mouse? I think this problem is similar to http://greensock.com/forums/topic/9279-draggable-with-css-scaling/ but I couldn't really figure out the fix. $(document).ready(function(){ var drag = $("#draggable"); var handle = $("<div class='resize-handle'></div>").appendTo(drag); TweenLite.set(drag, {scale: 2}); // <<--- this adds resistance <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< TweenLite.set(handle, {top: drag.width(), left: drag.height()}); var dragInst; dragInst = Draggable.create(drag, { bounds: "body", edgeResistance: 0.85 }); var arrowdragInst; arrowdragInst = Draggable.create(handle, { type:"top,left", edgeResistance: 0.85, onPress: function(e) { e.stopPropagation(); // cancel drag /*console.log("$(this.target).position().left = " + $(this.target).offset().left); console.log("$('body').width() = " + $("body").width()); console.log($("body").width() - $(this.target).offset().left);*/ this.applyBounds({top:100, left:100, width: ($("body").width() - $(this.target).offset().left + (this.x - 60)), height: ($("body").height() - $(this.target).offset().top) + + (this.y - 60)}); }, onDrag: function(e) { TweenLite.set(this.target.parentNode, { width: this.x, height: this.y }); } }); $("body").on("mouseleave", function(e) { console.log("mouseleave body"); dragInst[0].endDrag(e); arrowdragInst[0].endDrag(e); }); });

Hi! I have a box that can be dragged and I binded some custom mouse events directly to the DOM element. The events are triggered as they should on every browser besides explorer 10 and 11. Here is another codepen from another forum post. Try to rotate the object in explorer 10, 11. Doesn't work but explorer 9 and other browsers it works just fine. http://codepen.io/MAW/pen/LVZZeG Can you reproduce the same issue? Thanks!

Hi, recently in one of my projects I noticed a bug when creating a full-page draggable element with a form input field. On Android (HTC ONE X, Nexus 5 tested) default browser behaviour is to focus on the form field, when your whole page is a draggable container it fails to do so and causes strange behaviour. I tried recreating this in my Codepen. Steps to follow: - Scroll down - Click the input field Expected bug behaviour: - Focus is not on form field Devices tested: - HTC ONE X - Nexus 5 Since codepen zooms in, you can zoom out by pinching on the footer (You will see that the focus is not on the field) Greetings, Martijn EDIT: Accidentally overwrote the codepen, here's the original one http://codepen.io/MartijnWelker/pen/YXWJQg

if (Draggable.hitTest('#test')) { console.log('hit'); } Results in: Uncaught TypeError: Cannot read property 'pageX' of undefined. Object, selector - same result.

I've got a gallery of items. When dragged, the box's z-index appears to be higher than elements created before, but lower than ones created after. I want the z-index (for the dragged item) to be higher than all other items, not just the ones created before in the DOM. ie box 1 should move on top of boxes 2 - 5, not under them. I've tried ZIndexBoost. Edit: I've also tried applying style.zIndex="" on click, but it's not working.

This came up in my thread from earlier today and ties into another recent thread about events in TweenMax. I'd like to make a feature request for Draggable to emit events (onPress, onDrag, onThrow, etc.). This feature will allow the decoupling of our code from the create function and encourage good coding practice and organisation. Unlike TweenMax, Draggable is heavily tied to the DOM and so I think this is a reasonable request. At the moment I'm doing this using pub/sub to emit the events from within the Draggable init code. It works but it is an extra step. Here is a good example - the PageModule and the HeaderModule are logically separate pieces of code. The PageModule doesn't know about the HeaderModule, it just emits events. Jack, Carl, what do you think?

Is it possible to set snapping onDragEnd? I've tried... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = function(){ return 0; } } } and... onDragEnd: function(){ if(this.endY < 100){ draggable[0].vars.snap = [0]; } } but neither seems to work. I'm guessing this is because the snapping tween is created before this point, any ideas? Note: this is a simplified example, my actual application has has much more logic for evaluating where it should snap. Hence cannot define it when creating the Draggable.