Search the Community
Showing results for tags 'draggable'.
Found 610 results
-
Hi there, I consider using Draggable in my mobile game (either with or without throwprops), in a similar fashion to games like WordFeud: a draggable stage with draggable tiles on it. For this it seems most logical to have draggable objects inside a div that is itself draggable. This seems to work somewhat, though when I drag the tile, the draggable stage also moves (hence the tile itself moves twice the dragged distance). it seems easiest to cancel propagation of the event using the onDragStart callback, however it seems that no event object is passed into this callback so I cannot call e.stopPropagation(). Who has an elegant solution for nested draggables? By the way, I also tried temporarily .disable() on the top draggable but that gave serious javascript/dom errors. Here is my code so far. HTML: <div id="scrollContainer"> <div id="scroller" style="overflow: visible; padding: 0px; position: relative; height: 300px; width: 300px;"> <div id="tile0"> <img src="img/tile_0.png" style="position: absolute;top:0"> </div> </div> </div> And js: Draggable.create("#scroller", {type:"scroll", edgeResistance:0.5, throwProps:true}); Draggable.create("#tile0", {type:"x,y", edgeResistance:0.65, onDragStart: function(event){ //event not available here? }});
-
The next update to Draggable introduces some useful new properties: pointerX pointerY endX endY The "pointer" properties refer to the mouse (or touch) location from the last event (like event.pageX) associated with that Draggable instance. The "end" properties refer to where the element will land. Those get populated as soon as the user releases the mouse (or touch). Draggable also has the following properties (which aren't new): x y xMax xMin yMax yMin Here's the dilemma: technically there's an inconsistency with the way the new names are structured compared to the existing properties - "x" and "y" are at the end instead of the beginning ("endX" vs. "xMax"). Matching the current naming structure seems awkward ("xPointer" and "yPointer" don't seem nearly as intuitive as "pointerX" and "pointerY"). I don't like having inconsistencies, though. Should we change the max/min names so that the "x" and "y" are at the end? The only awkward one is "maxX" because there are two x's at the end. So it'd mean changing them to "maxX", "minX", "maxY", and "minY". Or we could leave the old/existing properties the same and live with the inconsistency. The nice thing about this is it wouldn't break any existing code that users have written. However, since Draggable is so new, this isn't as big of an issue - if we're going to make a change to the API, it's much better to do it now before more people start using it. What are your thoughts? We need to make this decision quickly, as the goal is to release the Draggable update by tomorrow. Your input is greatly appreciated. (by the way, the upcoming new features are mentioned in this thread: http://forums.greensock.com/topic/8056-draggable-invert-bounds-behavior/#entry31763)
-
Is it possible to create an infinite draggable loop using GSAP Draggable coupled with TweenMax? I'm creating an animation demonstrating a briefcase combination lock - the kind with three or four inline tumblers next to each latch on a briefcase that are rotated to form a combination. Only one number (an image-not text) appears on the face of the tumbler I made. Draggable works great when I move ("rotate") the tumblers to reveal the next successive number; but my image is a png file that is a vertical line of numbers from 0 thru 9. I would like the numbers to repeat or loop if I was to continue dragging the tumbler giving the impression that it loops around.
-
Hello I like Draggable a lot! Question: is it possible / will it be possible to drag an object along an svg-path or canvas-path or within an non rectangular svg-shape / canvas-shape
-
Hello i'm working with Draggable and the ThrowPropsPlugin - they are fantastic! However I have a problem. How can I get the final x, y position of the dragged object? When dragEnd is outside the boundery, ThrowProps will move the object back inside the boundery (very nice!) but where does it stopp? I'm working on a kind of mouse-follower, where one object follows the draggable one.
-
I am using draggable on a div containing svg elements If I dont use draggable and scale the div via:- var i = $('#chart'); TweenLite.to(i, 2, {scale:4}); The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors. However if I enable draggable via:- var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window}); and then zoom the SVG element become fuzzy as though they were scaled pixels. This happens even if I disable draggable before scaling Any ideas why this might be? Thanks - Dean Update: Scale without Draggable uses -webkit-transform: matrix(... Scale with Draggable uses -webkit-transform: matrix3d(... using Safari and Chrome on Mac - not a problem on Firefox (not using webkit) Ah: Putting force3D:false as in: TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false}); Is their a reason for the problem with matrix3d and scale on webkit? solves the problem
-
hi, first of all, thanks for the new draggable stuff, really awesome! i think, there's a strange behaviour when using the draggable plugin on mobile devices: i build a draggable div with hyperlinks inside. dragging works as expected while the links inside the draggable div don't work anymore. on desktop browser everything works fine. seems if there is a problem with the touch events in the draggable.js. here's the demo... http://dev.tm74.de/dragtest/ any idea? thx michael
-
Meet GreenSock's Draggable: spin, flick, drag, throw, or scroll with "physics"
GreenSock posted a blog post in Blog
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo -
Is it possible to use the Draggable util class with Canvas, specifically EaselJS? I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview Is the something wrong with the math on my Canvas version perhaps? Any tips would be appreciated.
-
Hello, Is there a way to invert the behavior of the bounds management. Having a box with bigger size than the container, that could be draggable but must fill the container. Best, Nico J.
