Jump to content

Search the Community

Showing results for tags 'draggable'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hey guys, I find myself in a pretty interesting UI challenge that I think Draggable might be able to solve. I will try to explain it as clearly as possible. Here's what I want to do – on both mobile and desktop: 1. Have a list of edge-to-edge elements (Think the contacts list on iOS without the separators) that the user can scroll through normally. 2. Allow the user to tap / click and select/deselect the list items 3. Hold the finger or mouse button down for 800ms and initiate drag/drop so that the items can be re-ordered. The main problem is having drag and native scroll at the same time on mobile devices. Quite naturally because Draggable uses the touch events to perform its dragging magic, so when you try to scroll the list, you instead throw the list items around. I plan on tackling this one by setting up my own mousedown / touchstart listener and combine it with a timer that would then create a new Draggable instance if the mouse/finger is still pressed after the 800ms. At that point I could forward the mouse position via an event to the new draggable.startDrag() method and have it drag instantly after being created. From what I can tell, this would be the simplest way to solve my problem, but I just wanted to make sure this logic isn't part of Draggable as is, and that the problem hasn't already been solved for me.
  2. I'm playing with Draggable and trying to use scrollTop as the type but it's not working. If I remove the type it works fine (or set it to any other type except scrollLeft). Any ideas? http://jsfiddle.net/Krcd6/4/
  3. Hi, I'm not exactly a coder but would like to use greensock for interactive comic book animation. There was already one question here about comics, but that was about controling the timeline in scrolling. I would like to use divs for slides/pages and you should swipe horizontaly from one to the next. I would like to control the animation within each div when that div/slide/page is visible and stop the animation when you swipe to other page. There should be restart of animation every time you revisit the page. Can I use draggable for swipe animation between slides? Would love to see some easy example of this... Thanks!
  4. Hey guys! I'm trying to make my Kinetic Layer draggable with the draggable plugin but I'm not quite sure if I'm doing it right. Maybe you guys can help me out a little. This is what I have so far: viewPort = new Kinetic.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight }); mapLayer = new Kinetic.Layer(); Draggable.create(mapLayer, {type:"x,y", edgeResistance:0.65, throwProps:true}); mapLayer.add(...); // adding map tiles to the layer viewPort.add(mapLayer); but I'm always getting: "Uncaught TypeError: Cannot set property 'onselectstart' of null --- Draggable.min.js:14". I have a feeling that I'm doing something terribly wrong here ... greetings Skripted
  5. Hi, Apparently select elements are ignored in a Draggable object, they are not triggered at all. In the 0.9.0 version of Draggable.js, input fields are now working properly ; so I just added "select" to the _clickableTagExp property (the "check list" allowing a tags, input, button, etc. to be triggered). However it does not seem to be enough. The select element is being triggered, but the dragging sort of sticks to the mouse. Any idea on how to solve this? (Or are you already on it...)
  6. I've been working on an AV timeline scrubber. For the most part, it's working, except after a target element is dragged, then the animation stops and will not resume. It does call the seek appropriately with the correct value in seconds. If I kill the animation and restart it each time after a drag event, the coordinates of the scrubber knob get messed up and I cannot tell where the darn thing is at or where it should be. Plus it seems to make more sense that an animation not have to be recreated every time. What am I missing here? D var knob_offset = 4; Draggable.create("#pb-scrubber-knob", { bounds: $("#pb-scrubber-bounds"), type: "x", edgeResistance: 1, onDragStart: function() { var knob = Draggable.get("#pb-scrubber-knob"); knob.update(); }, onDrag: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition())); }, onDragEnd: function() { $("#pb-elapsed-time").text( window.odeshell.formatTrackTime( window.odeshell.getTrackPosition()) ); window.odeshell.seekScrub(); }, onUpdate: function() { $("#pb-scrubber-fill").width( $("#pb-scrubber-knob").position().left + knob_offset ); }, }); window.odeshell.startScrub = function() { var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(0)); if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.restartScrub(); } else { window.odeshell.tlScrubberKnob = new TweenLite( "#pb-scrubber-knob", (dur/1000), { left:animate_to, immediateRender: true, ease:Linear.easeNone, onUpdate: function() { var sndpos = window.odeshell.getTrackPosition(); var dur = window.odeshell.getScreenDuration(); var kpos = $("#pb-scrubber-knob").position().left; var bounds = $('#pb-scrubber-bounds').width()- ($("#pb-scrubber-knob").width() + 8); $("#pb-elapsed-time").text( window.odeshell.formatTrackTime(sndpos)); $("#pb-scrubber-fill").width(kpos); if ( window.odeshell.playComplete() && (kpos >= bounds) ) { window.odeshell.stopScrub(); } } }); } }; window.odeshell.restartScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.restart(false, false); } }; window.odeshell.seekScrub = function() { if ( window.odeshell.tlScrubberKnob === undefined ) { return; } var kpos = $('#pb-scrubber-knob').position().left; var dur = window.odeshell.getScreenDuration(); var animate_to = $("#pb-scrubber-bounds").width()-knob_offset; var prct = kpos/animate_to; var sndpos = dur * prct; if ( sndpos < 0) { sndpos = 0; } if ( sndpos >= dur) { sndpos = dur; } var seekpos = Math.round(sndpos/1000); $("#pb-elapsed-time").text(window.odeshell.formatTrackTime(sndpos)); window.odeshell.setTrackPosition(sndpos); window.odeshell.tlScrubberKnob.seek(seekpos); if ( !window.odeshell.tlScrubberKnob.paused() ) { window.odeshell.tlScrubberKnob.play(seekpos); } }; window.odeshell.resumeScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.resume(); } }; window.odeshell.pauseScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } }; window.odeshell.stopScrub = function() { if ( window.odeshell.tlScrubberKnob !== undefined ) { window.odeshell.tlScrubberKnob.pause(); } };
  7. Hello! Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap. Im creating a webapp with a navigation that I can throw Like the facebook app. Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting "Snap to grid" checked. You will see what happens. Any thoughts or solution? Thanks //Robert
  8. Ratchet

    Nested draggables

    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? }});
  9. 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)
  10. SteveZ

    Infinite Draggable

    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.
  11. 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
  12. 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.
  13. 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
  14. 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
  15. 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
  16. 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.
  17. 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.