Search the Community
Showing results for tags 'draggable'.
-
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.
-
Hi, I am using the Draggable plugin and I need to enable/disable it sometimes. I can't find a sample on the help documentation to control this. The follow exemple seems not to work : Draggable.enable(); Thanks for your help.
-
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
-
Hi guys, just been testing cross-browser compatibility of Draggable via its demo page (http://greensock.com/draggable) and found out that it does not run on MSIE8 under WIndows 7 (in a Virtual Machine downloaded from https://www.modern.ie/en-us/virtualization-tools). It gives out the classic "Object does not support this property or method" and Codepen obviously won't work in MSIE8 at all, so I can't test it there. I know that this whole thing should be compatible with MSIE7+ from what I read, so I'm a bit confused now. Any advice please? Thanks, Martin
-
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!
-
Hi gang, Insert standard gushy comments about how great Greensock is...(cos it really is THAT good) I'm hoping there's something I've overlooked or that there's a quick and easy fix for what I'm seeing.... In my site I've encountered an issue with very quickly dragging objects with the mouse (in my limited test I don't think it was as much an issue on touch devices) onDragEnd I'd like to sometimes tween the dragged item back to it's original position (dependent on certain conditions) which works fine on most tests. However I noticed than when very quickly dragging and releasing it would sometimes get "stuck" on the release of the mouse and not tween back to it's original position. Using Developer Tools I could see that when this happens a style such as: transform:matrix(1, 0, 0, 1, -297, 14) or sometimes (not sure why it's different at times?) translate3d(-297px, 14px, 0px) is still applied to the draggable even though I've set a tween of x and y back to 0 (using a Draggable setup of type:"x,y"). A minimal version of the issue can be seen on this Codepen: http://codepen.io/anon/pen/GlHLa in which all I'm trying to do onDragEnd is : TweenMax.set(e.target, {clearProps:"transform"}); but this seems to be ignored when dragging too quickly and I'm left with the translate/matrix still applied. Perhaps there's another draggable setting I need to use or another event like onRelease needs to be utlised? Any pointers would be most appreciated. Thanks all.
-
Hello all! I've been using GSAP for a little over a week now and I'm loving it. Thank you for the awsome work you're doing. I upgraded from GSAP 1.13.1 to 1.13.2 this morning and began receiving the following TypeError from Firefox. TypeError: s is undefined - Draggable.js:141 I found that the "trigger" property was no longer accepting the selector string that I been using which is "#plat". Everything works great when I pass in the element or a jQuery object though so I'm just passing in the element now. I just wanted to post this incase someone receives the same error. Thanks again for GSAP!
-
Hi there, I'm trying to create a web app which let's the user move a square around inside a container on his smartphone / tablet and be able to move a square on his desktop. This is, at the current state, accomplished by saving the interaction to a databse via ajax (from the device) and reading for pending actions from the database on the desktop site. Moving elements via arrow works just fine, because the steps are fixed. I'm just wondering if it would be possible to trigger more advanced things like Draggable with ThrowPopsPlugin. If I'm understanding the docs right, I'm able to trigger Draggable by hand via the startDrag() function but I have to pass the original event. This would be not possible since I'm not able to pass the event from the third party device to the db and further on to the desktop site. Is there a way to "simulate" such an event on the desktop site, fill it with the neccessary data (pageX, pageY, etc.) and trigger it? Your help is much appreciated. Thanks in advance! Kind regards, Florian.
-
I want to drag a 'marker' to a (world)map, but since the user should be able to place multiple markers i need to leave the original in place. The idea is : - user clicks(mousedown) on marker icon - create a clone an attach it to the cursor - on mouseup place the marker on the map. - user places second marker, etc etc.
-
Hi, I'm currently bundling up my client up using requires and browserify. I installed gsap using npm install, and it seems to only expose TweenMax. I managed to bundle Draggable using './node_modules/gsap/src/uncompressed/utils/Draggable.js', but hte resulting require('./node_modules/gsap/src/uncompressed/utils/Draggable.js') looks pretty ugly. Furthermore it sees that TimeLineLite is not exposed either, even though it's contained. How can I access the various components using the npm module? Thanks, Sven
-
Please, could you tell me what I'm doing wrong on the stopDrag function? var wall = Draggable.create(".wall", {type:"x,y", edgeResistance: 1, bounds: "body", throwProps:true, onThrowUpdate: stopDrag, onDrag: stopDrag}); function stopDrag(){ if (($('.wall').height() - (($('.wall').position().top)*-1) - $( window ).height()) <= 0 ){ wall.endDrag(); } } As you could see in the attached Codepen, I'm trying to make a large draggable object having the document body as bounds. It's working fine except when dragging all the way up. It's going out of the bottom limit (I think this is normal, as the document.body shouldn't have a height limit) and that's why I'm calculating the point where it should stop in the stopDrag function. I don't know exactly how I should call endDrag(), in the docs I can read that I have to return the event that initiated the drag event but I think it's not clear enough. By now, I'm getting: endDrag() Uncaught TypeError: undefined is not a function If you could tell me how I can properly call endDrag() it would be great. Also if you know a better approach to prevent dragging out of the bottom (when dragging up and before white background appears, it should stop). Thanks.
-
I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I want is for mouse scrolling to behave just as the other scroll methods do. Any help with achieving this effect would be greatly appreciated!
-
Hey! I have a set of fullscreen divs that I drag using draggable. I was wondering if there was an elegant way of triggering animations in those divs when the div has snapped into view? thanks in advance!
-
-
Hi, As shown in the codepen, the issue I'm having is that whenever I finish dragging the object, the Bezier tween of that object stops, as both the Draggable and beziertween use Translate3D. While experimenting, I found that only x,y properties on both provide smooth animation and are not breaking the position of elements. Using margins or top/left positions renders bezier animation to be choppy, while using those types for Draggable causes the elements to be thrown off their initial positions. You can see the full-scale animation I'm working on at http://patmir.com. Using onDragEnd to re-initialize the bezier tweens returns the objects to their initial positions, which I want to avoid. The question is: What would be an appropriate solution here? I'd rather avoid having to re-initialize tweens and modyfing the tweens to use current position of elements, as it might decrease the site's performance significantly. Using different types for Daggable won't work, as the elements are positioned on top/left based on % and calc(). I would appreciate any insight into what I'm doing wrong here, With Best Regards, Patryk
-
I want to know if there is some way to click and object and trow it with draggable and throwprops plugin ?
-
Hi All, I could do with some help! I'm using the draggable plugin to build a custom scrollbar for a horizontally scrolling element. It works great when dragging the scrollbar, but I also need to update the scrollbar if they scroll using a mouse or swipe with a finger. I'm attempting to access a few variables stored within the draggable instance, but I'm always returned undefined. Here's a simplified version of my code: var scrollbar = Draggable .create($scrollbar.grip, { type: 'x', bounds: $scrollbar.track, cursor: 'ew-resize', onDrag: scrollContent, onThrowUpdate: scrollContent }); This is where I'm getting lost. If I access scrollbar I can see some information stored, but not the three bits I need: max x min x current x (I can work all these values out myself, but as the work has already been done, and I just don't know how to access it, I'd rather not duplicate it and instead learn the right way.) $content .on('mousewheel', function(e){ $content[0].scrollLeft += e.deltaX; console.log(scrollbar.maxX); // This is undefined e.preventDefault(); }); Any ideas? Thanks, Will
-
Hi guys, I can't seem to find Draggable & ThrowProps plugin for AS3? http://www.greensock.com/draggable/ Is that because there's another alternative method somewhere in the AS3 library that gets that wheel spin effect? Thanks
-
I have created an image slider for mobile devices using draggable and throwprops plugins. i want to limit the dragging limit upto just one image per drag. I don't want to make it too much free flow resulting in sliding through many images.- 6 replies
-
- 1
-
-
- throwprops
- draggable
- (and 1 more)
-
Hi, I use the great draggable + throwprops in the scrollTop context. Now, I would like to build an infinite scroll loop, both way up and down, as a sort of spinning wheel (often used to select a day month hour ...). I have tried onDrag, onThrowUpdate, testing and changing dynamically the scrollTop() based on my limit values, but it is impossible during the animation, only after. I am now searching using liveSnap or any update() method or thru scrollProxy object changes ? It shall be easy to use scrollTop to build a loop (shifting onthego the dynamic value used by scrollTop), to endlessly loop the scrolled content without breaking the great and smooth draggable animation. = infinite scrollable using draggable, throwprops and scrollTop ? If the scrollTop is higher then the scrollable_limit we have chosen, we wanna that the scrollTop return to 0 while not breaking the actual drag or throwprops movement. And if the scrollTop is 0 and the user want to see the end while dragging, the scrollTop shall be set to the scrollable_limit we set. It could really be useful ! So the user has never to return far up or far down and have an endless repeatition of the content ( scrolling a menu From A to Z, A to Z, A to Z or Z to A, Z to A, Z to A ... ) smooth. Thank you. -
I have created a rather complex modal script functionality, and want to be able to alter my modal's draggable bounds on a drag start after they have already been initialized. Is there a method to do this? Simple code snippet as an example, though obviously it likely wouldn't work this way: Draggable.create(element, { bounds: bounds, onDragStart: function () { if (usenewbounds) { element.bounds = newBounds; } } });
-
Hi, I have been moving old Flash projects over to using HTML and JS. My projects use a lot of drag and drop interaction so GSAP is fantastic for me. I am having difficulty getting it to work with IE8 (works perfectly with modern browsers). I have narrowed down the problem to be with the hitTest function that causes the error: Object doesn't support this property or method Is hitTest something that doesn't work with ie8 or should I be looking elsewhere for errors? Thanks, Matt
-
Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.
-
I've got a project where I've set up multiple circular dials, one within the other. If you rotate one, it rotates the other at a different rate of speed. One of the problems is that since they are divs that overlap, they are square and thus the inner dial will sometimes overlap the dial below it (since it's rotated at an angle, the corner of the square covers up much of the layers below it). I would love to use the built-in click and touch handlers that Draggable has, is there a way to get all events of the Draggable object and determine the users' intent and instead of spinning the top-most layer it interacts with the correct layer below it? I will try to create a CodePen example shortly.
