Search the Community

Hi, I'm testing out the draggable demos from this site on a Samsung Galaxy S2 GT-I9100 Android version 4.1.2 in the stock browser and I cannot actually drag anything, the draggable item moves to the correct place upon drag ending but does not move around whilst being dragged. Are you aware of this problem and do you know if it's fixable? Cheers

Hi, I'm using scrollTop on a div and would like the native scroll bar to show on mobile. It does on the desktop and Chrome on Android 4.1.2 but doesn't on iOS 7.1.1 on iPhone 4S in either Safari or Chrome. I have set -webkit-overflow-scrolling:touch in the css but it's not helping. Any ideas? Thanks

Here's an odd one. Rotation for SVG elements doesn't seem to work in Firefox. Does anyone know if there's a workaround? http://codepen.io/Mode7James/pen/mjxtC

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!

I've created an SVG dial that rotates just fine with Draggable, however when I enable "throwProps" when I release the mouse it flings it in one direction or the other much faster than expected, and not in the direction it should be either. Has anyone had this issue?

Hi Guys, I noticed that when a rotated div containing text is animated the text appears pixelated, somewhat rugged; if I apply Draggable.create to the div, the text becomes smooth. Is it possible to have the text appear smooth before using Draggable? See this pen: http://codepen.io/anon/pen/dxKHn - after running it the text is pixelated, if you click on the green box then Draggable is applied and the text suddenly becomes smooth. Thanks, Elior

Hello, Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ? This is a general question but I did not really find an answer on the forum. Before leaving for prototyping I'm not sure this is possible. Is someone has any feedback on this point ?

Hi! Have a slightly problem to deal with regarding the plugin Draggable and throwprops ON. I have some images that I can throw and want the image im throwing should stick to the most accurate position of another image based on x and y positions. Is there a way that I can run the snap function for getting the x, y properties as a singel function of the throwing object instead of calling x and y properties separated? So I can match the throwing object to all the images x & y positions in one function instead of calling it twice. Want to do something like this: Draggable.create('.image', { bounds:'.container', type:'x, y', edgeResistance:0.65, throwProps:true, snap:function(x, y) { var pos = get_closest_image_pos(); // returns array [x:Number, y:Number] return pos; } }); Instead of this: Draggable.create('.image', { bounds:'.container', type:'x, y', edgeResistance:0.65, throwProps:true, snap: { x: function(endValue) { return get_closest_image_pos_x(endValue); }, y: function(endValue) { return get_closest_image_pos_y(endValue); } }); Or is there another way? Many thanks for the Greensock library! Pure GOLD!!

Hey folks, I apologize if I'm just missing this in the docs. We are implementing something very similar to: http://codepen.io/GreenSock/pen/gnoDc For some reason, I can't figure out how to access the id of the selected element in order to use the value in a form. For example, assuming that each of the content divs had a unique id hung on them and I rotated the dial until the "Three" slide was visible, how can I trigger an event and get the id of the selected div? Thanks so much for the help!

Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior

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.

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, A rather strange situation: several tweens of the same object are added to a timeline to be played in a cubic bezier format. This objects is then dragged via Draggable. Then, in the 'onDragEnd' event the timeline to which the object had been added to is played starting from 0. I set a breakpoint after calling the play() function, and then make a call to TweenMax.getAllTweens(). The first time the object is dragged I see all the tweens that should have been on the timeline. However, after the 'onDragEnd' function ends, the browser steps into the code inside Draggable.min.js which continues on, and then if I make another call to TweenMax.getAllTweens() (while still in Draggable.min.js) then the tweens that were dragged no longer exist. What is no less odd is that if I drag the object again, play() is called again and works as if the tweens had not been removed, yet still TweenMax.getAllTweens() returns a list without the instances that had been dragged... Despite the fact that the removal of the tween happend inside Draggable.min.js, if I remove the call to the play() function from the 'onDragEnd' event handler, no tweens are removed... any clues?... Thanks ! Elior

Hey all, Browser : Chrome, OS : Windows 7 x64 codePen : http://codepen.io/Stefdv/pen/eybkF The problem(s); When i switch between sliders, the sliders don't always correspond to the current tranform of the box. There is als a 'jump' when i switch between slider adjustments. another issue: i can't seem to make a rotationZ for 180deg...at least it's not rotating right then ? Any help would be appreciated ( a lot )

Is there a way that I have a draggable object inside another draggable object. I am developing a mobile app and want to have a slider within a slider.

When trying to access "this" inside my onDragEnd callback, the FireFox 28.0 debugger is showing "this" as an instance of "Window" instead of an instance of "Draggable" as stated in the Draggable docs. Here's my simple codepen: http://codepen.io/anon/pen/dKEki ... and the FireFox debugger display at a breakpoint inside the callback.

Hi, I am building a page that builds multiple 'scenes' horizontally in the content area. Only one scene is visible in the area at a time. Users can drag the scene container to get to other scenes. I've done this using Draggable. For the most part, it has worked great. However, some scenes have a large video in them. When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag. I've tried adding data-clickable="false" to the video tag but it still doesn't work. This all works on the desktop as far as I've tested it. Here is a code pen sample of what I'm talking about. You can drag the grey container box, but if you try to drag over the video, the container won't move. http://codepen.io/anon/pen/yohqG I'm using iOS 7.1, but the same thing happens in an older version as well.

I am trying to use Draggable to rotate a <g> inside some inline SVG. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/utils/Draggable.min.js"></script> ... TweenLite.set(".group1", {transformOrigin:"50% 50%"}) Draggable.create(".group1", {type: "rotation", throwProps: true }); This will allow the element to be rotated by dragging, but none of the momentum works and the rotation is incorrect in that the movement shifts from clockwise to counter clockwise mid-drag.

Hi guys, I am working on a drag and sort thing with draggable and i have an issue that i can't find a way around it. Actually it looks like a bug. Items are in an unordered list so they are all identical in terms of child elements and class names. Draggable seems to work find with a class selector. Here's a code pen with just a simple setup. There is no drag trigger. http://codepen.io/ap-o/full/CEHBo But, once i pass a trigger selector everything goes wrong. Try to drag the little black box. http://codepen.io/ap-o/full/qfKtm Thanks in advance for your time *Apo