Search the Community

Here's a sample in Codepen. I'd like to drag the rows around after the user selects Move. I am finding the correct position and re-arranging the DOM correctly, but I can't figure out how to "reset" Draggable. I've tried update. I've also tried killing it and resetting it, which oddly remembers its old settings and recovers. Any suggestions on how to make this work? (Also while I'm here, why do I have to remove the "style" in moveRowsCompleted? I shouldn't have to clean up after GSAP.) I'd really like to get the rows to move out of the way as I drag around and saw this but that's a bit too complicated for my skill level, although it is beautiful to watch. If there is a simpler example I'd appreciate it: http://codepen.io/anon/pen/qdKqWE?editors=101 (I've suggested this before and I haven't seen anything but it would be really nice to have a series of simple functions to do some of these things like jQuery UI. I really want to use GSAP -- it is so much smoother than jQuery and works on mobile browsers -- but stuff like sortable is extremely difficult to achieve, or at least appears to be.) One last comment: I need to use animations a lot on a temporary basis like this. I want to make the animation go then, when it is done, be done with it and the code. GSAP seems to leave a lot of style tags around. Is that correct or am I mis-interpretting its primary usage model? Thanks for any help in advance.

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!

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

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!

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];

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!

We're encountering an issue using Draggable on a multitouch table (WIndows 8 + Chrome), but it also seems to happen on Android Lollipop, so it's probably a general issue. When dragging an item and you use another finger to tap shortly on the same item, it will be suspended in place, not firing the proper events for ending a drag (onDragEnd, onRelease). Snapping and throwprops will also not work. The issue is easy to reproduce using the sample on https://greensock.com/draggable. Enable the checkbox for "snap end position to grid". Start dragging one of the squares and then shortly tap on it with another finger. When you release, the square will not snap to a position on the grid. Has anyone encountered this and found a way to fix it? Should I file an issue somewhere?

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!

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.

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");

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 created an example on codepen to demonstrate the problem. Basically the SVG does not obey the bounding rule. Any idea? it works on Chrome. Draggable.create("#svgId", { throwProps:true, bounds: window }); I don't want to enclose the svg inside a div and rather drag the div because I need specific svg click pass-through features which the divs do not allow. Dragging an enclosing div would be a workaround I could not use.

I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).

Hi, Can we implement below pen using GSAP draggable.? i don't want to use jquery UI. Thanks for reading

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.