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 All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn
  2. I am attempting to resize a draggable DOM. As in the user can select an edge of the DOM and drag it to a new size. Is this something that GSAP is designed to handle or am I on the wrong track? jQueryUI 'resizable' doesn't really work with a draggable (or I haven't yet been able to get it to work).
  3. hi, i'm having a problem when using draggable and then scaling objects with css transforms: everything works fine so far, but the scaled div gets blurry after scaling. first i thought it's a browser problem, but when leaving draggable away, the rendering works as expected and the div's text looks sharp again, no matter what scaling factor is used. when using draggable, it seems to me, that the browser treats the scaled object as an image... maybe there's the possibility to force the browser to re-render? would be nice if there's any workaround ;-p thanks! michael
  4. I have create a div like this: <div id="content" > <div id="textContent"> aaaaaaaaaaaaaa </div> </div> Draggable.create("#content", { type:"top,left", edgeResistance:0.5, bounds:window }); But I cant copy the words "aaaaaaaaaaaaaa". I have tried data-clickable="true". But I still cant set focus on the words. Plz help me . . BTW I have a simple solution.But cant use throwProps. <div id="textArea"> aaaaaaaa </div> <div id="content"> </div> Draggable.create("#content", { type:"top,left", edgeResistance:0.5, bounds:window, dragClickables:false, onDrag:function() { $( "#textArea").css({"top":this.y,"left":this.x}); } }); And sorry about my terrible English...
  5. Hi everyone, its been a few days since I found out and started using gsap js and must admit its an awesome framework. I make native games for iOS and now I evaluate gsap for html 5 cross platform 2d game development. I have a strange performance issue regarding the Draggable utility on iOS devices (maybe on other platforms too but I have not tested any other device). When the user moves the draggable element around with his finger I observe high CPU usage (55-65% on an iPhone 3GS) while when the user is not interracting with the element the CPU usage is 25-35%. I downloaded an updated version of Draggable from here but there was no difference. I am at your disposal for further info and testing!
  6. Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class="galleryImg"></div> </div> I completely flush #imageContainer and add few elements, with class name galleryImg, to it dynamically. To make the imageContainer draggable I added following code in my JS Draggable.create("#imageContainer"); However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows: TypeError: i._gsTransform is undefined ...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i The error also occurs as soon as I click (mouseDownEvent) the imageContainer. Is there anything am I doing wrong over here ? Which JS files do I need to add to use Draggable? Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example) Please guide.
  7. 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? }});
  8. 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!
  9. 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/
  10. 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(); } };
  11. 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
  12. 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
  13. 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.
  14. 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)
  15. 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.
  16. 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
  17. 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.