Search the Community

Hello, I'm developing a web app that uses polymer to display some custom components and GSAP to drag them around. It appears that there is a conflict between draggable.js and webcomponents.js. Webcomponents.js is used as a polyfill for Firefox/Safari/IE (none Chrome basically) to provide support for the shadowdom and other such things. In Firefox, when I enable polymer on my site, all of my draggable divs become...undraggable. No error is thrown. The draggable events (click, move, etc...) are being thrown but the divs just won't move. However, as soon as I disable polymer (i.e. removing the javascript includes, webcomponents.js specifically), all the divs become draggable again. I looked into the issue and it looks like webcomponents.js wraps all DOM elements within it's own object and this...can have side effects. Here's a link to what I'm talking about: http://webcomponents.org/polyfills/shadow-dom/#known-limitations Looking through draggable.js I figured out that the problem is that some of the matrix calculations are returning NaN as a value and this breaks the transform movement. The specific lines that are causing the calculation error are near the bottom of the _getOffset2DMatrix function. It's these two lines: m[4] = Number(m[4]) + offsetOrigin.x + (offsets.offsetLeft || 0) - parentOffsetOrigin.x - (isRoot ? 0 : parent.scrollLeft) + (offsetParent ? parseInt(_getStyle(offsetParent, "borderLeftWidth"), 10) || 0 : 0); m[5] = Number(m[5]) + offsetOrigin.y + (offsets.offsetTop || 0) - parentOffsetOrigin.y - (isRoot ? 0 : parent.scrollTop) + (offsetParent ? parseInt(_getStyle(offsetParent, "borderTopWidth"), 10) || 0 : 0); And the specific part of both calculations that returns the NaN value is: (isRoot ? 0 : parent.scrollLeft) (isRoot ? 0 : parent.scrollTop) When isRoot is false, for some instances of the calculation (this routine gets called a lot) the "parent.scrollLeft" and "parent.scrollTop" properties are "undefined". Yet, this ONLY happens when webcomponents.js is loaded (which again is needed for Firefox and Safari for Polymer to work). When webcomponents.js is NOT loaded, "parent.scrollLeft" and "parent.scrollTop" return numeric values as intended. The work around a co-worker of mine was able to figure out is to simply "unwrap" the DOM element being passed into the matrix calculations (basically undoing webcomponents.js wrap business). This fixes everything BUT of course means a direct update to draggable.js which isn't ideal for the long term. Here's what we did to fix it for now: _getConcatenatedMatrix = function(e, invert) { e = (typeof unwrap === "function") ? unwrap(e) : e; if (!e || e === window || !e.parentNode) { return [1,0,0,1,0,0]; } .... / We simply added this line at the top of the _getConcatenatedMatrix function. e = (typeof unwrap === "function") ? unwrap(e) : e; The function "unwrap" is defined in webcomponents.js and when executed reverts e to what it is expected to be. Another solution we used that also worked was to update the "isRoot" inline if statement from above to the following: (isRoot ? 0 : (parent.scrollLeft || 0)) (isRoot ? 0 : (parent.scrollTop || 0)) And while this seemed to work and draggability was returned to the divs, we weren't sure if this would actually produce other unknown side effects. Using "unwrap" basically passes through exactly what the code was expecting to receive in the first place if webcomponents.js wasn't loaded, so it seems the most non-bug-producing solution BUT it forces a coupling to webcomponents.js specifically. The other solution, seems to work, but could have unforeseen issues later. And both solutions require updating draggable.js which will make keeping our library up-to-date a hassle. So, my questions to you guys is, have any of you experienced this issue? Did you find a better non-draggable.js modifying solution? Is there any chance draggable.js could be updated to support webcomponent polyfills? Thanks for any feedback, Mariano Martinez III

Is it possible to have a draggable snap to exact co-ordinates rather than an array of x and y values? For example make it snap to {x:40,y:50} and {x:100,y:200} only? At the minute if I use snap:{x:[40,100], y:[50,200]} it will snap to all 4 combinations of these values.

Draggable works everywhere except IE11 (edge mode), in which it only works on the second click... Has anyone else experienced this? I thought it might be my code but the same problem occurs on the demo here: http://www.greensock.com/draggable/ Thanks

Hello, I am using your amazing Draggable classes to drag and drop divs and I'm looking for a way to detect if a draggable object is enabled or not... This is my list of draggables divs: var DraggableList = Draggable.create(myDivsArray, { type:"xy"}); After some user actions, I need to disable divs, so I use: DraggableList[divIndex].disable(); But how can I check if a div is enabled or not? // Something like that for example: if(DraggableList[divIndex].enabled){ // this div is enabled for the drag... }else{ // this div is NOT enabled for the drag... } I checked the Draggable object and I didn't se any "enabled" properties... Do you know if there is way to check the state of a Draggable div? If there isn't, it could be great to add this feature to the Draggable object. Thanks!

Love the product, first time posting. I couldn't find in the docs if there was a method to detect if the draggable object moved left or right (or up or down). I was calculating using onDragEnd document.getElementById('draggableobject').offsetLeft - this.pointerX In some cases I had moved the element to the right just a teeny bit but received a negative number from the calculation above. Any advice would be appreciated.

Hi, I have one small questions. I would like to have an outside container handlers when the application loads. Only when I catch handler so it'll only be able to drag into a given container. Is it possible to set the parameter? Thanks for tips...

Hello and thanks for any help you can provide guys. Here´s my little issue: I have a map I need to zoom in/out this map. When zoomed in, users may drag it to see the details. Everything works, until I try to reset the map to it´s original scale/position. If I dragged the map, when the zoom out is selected, the scale goes right, but the position goes wrong. I want the position to be reset to the original values but it goes crazy if I made a drag of it. Also, as a plus....it is possible to make this zoom in, according to the user mouse click? Sorry for my grammar! Regards!

Suppose that I have the following code: window.mygs = window.GreenSockGlobals = {}; Modernizr.load( [ { load: [ 'TweenLite.js', 'ThrowPropsPlugin.js', 'CSSPlugin.js', 'Draggable.js', ], complete: function () { window.GreenSockGlobals = window._gsQueue = window._gsDefine = null; // from TweenLite.js line 67 window.mygs.Draggable(...); } } ] ); When I run it, I get this error: Uncaught TypeError: Cannot read property 'greensock' of undefined Draggable.js:795 What am I doing wrong? Is it possible to load a sandboxed version of GSAP asynchronously? I only need it after the page has loaded, so I'd prefer to load it asynchronously. Thank you.

I'm using multiple instances of Draggable in the type:rotation and I've hit a snag. I'm building a html based single page app for iPad, this slides horizontally through sections of content using 3d transform. You swipe vertically within a section to see slides, and swipe left or right to move through sections. It moves 1024px every section swipe. Draggable rotation works perfectly if it appears on any slide in the first section, but the interaction is offset somehow on slides in subsequent sections. it's as if the datum point is relative to the window, or the Draggable instance is locked in the vertical plane of dragging. Here is the container markup of which all the code sits - I'm afraid the code is too complex to add to a codepen. <section id="Container" class="collection" style="width: 3072px; transform: translate3d(-1024px, 0px, 0px);"> I've tried looking into the applyBounds function and defining bounds, I even took the example back to the basic one on codepen. Ive used setTimeout to see if I was calling Draggable too early. I'm stumped.

hi, I am battling to switch between 2 draggables setup on same element, am wondering if this is possible at all. basically the codepen has an example of what I want to do, but it isnt seamless. draggable is setup for element of type x,y, what i want to do is when the drag direction is up kill the type x,y draggable and switch to a type: rotation draggable so that the card moves around on an axis. you can see mine does that, but only if you release and then click again - is there any way to make this seamless, so it just switches mid-drag ? I am not so sure its possible, but am hoping someone on this forum has a better idea than me and can confirm or deny. thanks, Justin

I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.

I couldn't find a way to enable draggable scrolling if the initial target is a link. The same issue can be seen here - https://greensock.com/draggable- you can't scroll the element if you drag it by the "Club GreenSock" link. What can I do to enable dragging for this use case? Thanks, Nikolay

Hi, simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...). I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created? In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable. Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]}); Thanks.

When I create a Draggable object of type "rotation", it starts at 0 degrees rotation. Is there a way to set this to another value via JavaScript code? Use case: I've got a dial that selects a particular setting that gets saved. When the user comes back to the screen I want the dial to be positioned to the previous setting. Thanks! David

Hi, is there a way to clear the existing draggable tween onStartDrag or onPress? I get a small hickup when the draggable reaches the last snap-position and a user tries to drag past this position while there's already a draggable tween running. What happens is, it tweens to the previous snap-position. Setting the edgeResistance to 0 did not help, either. So I'm trying to find out if there is a tween running and to clear that before the new Drag is initiated. Thank you. Peter

Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView") These two sides are embedded in a "mainView" which is the page container for calendar. (Please have a look to attached file). In fact, i am trying to use a horizontal Draggable (InnerView) into a container which has a vertical scroll (mainView) I made a lot of research , check mobile performances (Galaxy S3 mini to iPhone5) and tests to try : "Scroll In Scroll" : Adding a vertical Draggable for mainView + Adding a horizontal Draggable for InnerView it "works badly" but don't know how to control vertical & horizontal in order to "lockAxis"; right now you can do diagonal drag which is not good (and bad perfs of course) moreover : with this method, i removed native scroll (provide by webkit with -webkit-overflow-scrolling: touch; which brings low perfs on vertical scroll => My Conclusions :using Greensock Draggable to manage vertical scroll is not possible cause we have very bad perfs on low devices I have to use native scroll provided by webkit for vertical scroll (best perfs.) and use Draggable for horizontal scroll (in InnerView) only Do you agree ? So, this is the problem i can't resolve : When i create a new Draggable for InnerView (params below) with {type : "x"}, i can't do a vertical scroll anymore (for sure). What i would like to do is to detect when user is doing a horizontal or vertical scroll on InnerView (by a swipe or drag gesture) . If User is scrolling horizontaly => we use Draggable Instance for InnerView only if User starts scrolling verticaly => we use a "prevent default" for Dragable to release touch bind and so let the browser do a native vertical scroll (webkit) So for this 2nd point, i don't know how to do this. (I had a look on google, GSAP forums, Docs...) I tried to bind the event with onDragStart method but didn't get it. Do you this this is the right approach ? I cant use a Draggable instance with {type : "x,y"} because it would mean that only "InnerView" will scroll vertically but in our case we need to scroll the entire mainview (which include FixedView + InnerView => so the mainView I had a look to "scrollLeft" and "scrollTop" properties and several code pens but i am still blocked. Hope my post is understandable; if you need more details, do not hesitate. Here Draggable Instance for InnerView : innerView = Draggable.create(innerViewEl, { type : "x", bounds : targetStageEl, throwProps : true, force3D : params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, // dragClickables : true, lockAxis : true, // zIndexBoost : false, snap: { x: function(endValue) { return Math.round(endValue / contextInterface._width) * contextInterface._width; } } }); Here DraggableInstance for MainView (bad perf for vertical scroll) mainView = Draggable.create(mainViewEl, { type : "y", bounds : {minY:0, maxY:-3000}, //SimulateLongScroll throwProps : true, force3D : false, // params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, dragClickables : true, lockAxis : true }); Thanks in advance.

Hi there, First of all I like to say i love your product and have been actively using the AS version along time and when a js version came out, it was like a god set. I have a issue with the Draggable class, basically i am using the class to drag a custom slider. When I then proceed to another section of my web application and then come back to the page which has the slider class there is no way to reset the slider drag handle position back to 0, I have tried making the instances of the draggbable item to null and have even clear the style attr, but for some reason when I recreate new Drag instances the transform matrix data is of the old data this is how I try to get rid of the old instances: for (var i = 0; i < this._draggables.length; i++) { this._draggables.disable(); //disable the instance. this._draggables=null; } $(".drag_handle").attr("style","") this._draggables=null; and this is how I create it this._draggables =Draggable.create("#allocate_people .drag_handle",{type:"x",bounds:$('#allocate_people .drag_handle').parent()}) any suggestion as to what I can do to reset it back to it original position thanks, Steve

Hello, I'm a Draggable/GSAP newb... I've been playing around with it to see if it meets a requirement that I have for a project i'm working on. And basically what I'm trying to do is to start off with the draggable instances on the white div, but make the orange div the container, so that when a user drags the green or red squares they drag them from the white div to the orange div. Right now, if I set the draggables bounds to the orange div they start off on the orange div. Can anyone help me? Thanks.

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!

Hello GreenSockers, I just set up a row of Draggable cards that all move together using Draggable and some advice from this forum. The dragging works great but doesn't play nice with other code that is using buttons to move the cards. Would someone please recommend a way to drive the draggables with buttons? Thanks, ww

I have a Draggable "knob" that sits in a header with a fixed position. It initially works as intended, but once you start scrolling down the page it gets harder and harder to rotate the knob - almost as if there's resistance being added to the knob as you scroll further down. Here's a quick codepen to demonstrate what's happening (scroll down and try using the knob): http://codepen.io/anon/pen/hrvnw Is there a way to configure or adjust Draggable so that I don't have to do a workaround like temporarily setting the position of the header to absolute while the knob is being used?

Hi All! I am in the process of building a simple slider with the GSAP's Draggable inside a responsive(ish) site — only one breakpoint. Basically what the slider does is — as it is being dragged it updates its' position to the span above. Essentially letting the user know how much percentage they are on the bar. Note: The draggable's initial starting position is provided by an outside AngularJS service, but in the CodePen test is set to fixed 50%. After initializing Draggable(s), we convert that % value into pixel values, and use TweenMax.set() to set the new value. This was done, because because for some reason the Draggable initializes back to left: 0px and drags form there if the % value is left. Kind of jarring. When the user stops dragging, then the value is calculated back to the % value, so that when the site is resized then I can keep the draggable relative to it's parent bounds. Before the drag is started again... onPress: I reconvert the percentage value back to pixel, and then we can start the drag... Issue (#4): Number 4 in the list above is where I currently have an issue. The draggable is restarting its' drag position from 0px again even though the left value has already been recalculated back to pixel based value...I basically have to "click" the draggable with full release THEN I can drag without it restarting from left: 0px, and if I just press and then drag it starts from 0px... Any ideas as to what is causing this issue? Or maybe I'm missing something. I've thrown an almost exact copy of my code inside the CodePen below.

What is the best way to control a Draggable element's scroll position programmatically? I'd like to be able to explicitly set the draggable's x, y position from code. Setting the draggable's x and y properties doesn't seem to do anything (the docs list them as 'read only'.

Is there a possibility to drag the window as I drag elements around in a window? I mean, if the window is higher than what the browser can currently display, I need to scroll it down to reveal the rest of the page. I have encountered questions about scrolling a container for the actual Draggable element itself, which is not what I'm after - I simply need to scroll the whole window/document, as I'm not limiting the drag to a container. Thanks for any pointers you could give me here

Hello, I'm making an interactive analog clock using Adobe Edge. The hands of the clock can be dragged to any particular time. When dragged, the movement of the hands coincide with each other. I was able to code the "hour" hand that when dragged the "minute" hand moves accordingly (with 12 times the rotation). It works flawlessly. var hourHand = sym.$('Clock_H'); var minHand = sym.$('Clock_M'); Draggable.create(hourHand, { type:"rotation", throwProps:true, onDrag: syncMinHand, onThrowUpdate: syncMinHand } ) var hourDraggable = Draggable.get(hourHand); function syncMinHand() { TweenLite.set(minHand, {rotation:hourDraggable.rotation * 12}); } However, I want to be able to accomplish the same for the "minute" hand. When the "minute" hand is dragged the "hour" hand moves accordingly (12 times slower). I want to be able to independently move either hand at any point with the other hand corresponding appropriately. Any help is greatly appreciated!