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. I have a draggable element and would like to keep the browser scroll locked while dragging this element. I've set the allowNativeTouchScrolling property to false, but now once I get to that part of the page, it renders the page unscrollable and gets stuck there only allowing my draggable object to move. Is there any way around this?
  2. In the Codepen I am trying to make a draggable list of items that contain text. Each item must have `overflow: auto` so that the content can scroll. However, on touch devices in Chrome the pointer event gets caught in the item and it does not drag smoothly. To replicate, launch in Chrome and enter responsive mode via dev tools. Dragging in between the elements works as expected, but dragging on the elements does not work correctly. I have tried various draggable options and also laying out without flexbox, but none seem to work. I have also tried toggling a dragging/not-dragging css class that sets overflow:hidden / auto , but that does not have the required effect.
  3. Hi, I'm running into a problem where the event data is not passed into the parameter of the draggables onClick. In iOS I'm at least getting pageX as expected, but on Android stock browser (called com.android.browser (, the behaviour is weird. Sometimes both values are 0 and screenX, screenY are undefined, sometimes the event is fired twice and the second time all values are correct. If you add if (e.pageX === 0 && e.pageY === 0) return; to the beginning of the onClick handler, you will see that once every couple taps, the alert will come up and the values will be there. Thanks
  4. Hi Folks, Am trying to determine if there is any way to use Draggable in conjunction with jQuery's .on() method, or to achieve a similar result, such that any dynamically created element of a given class under a parent object will inherit the Draggable configuration. jQuery doc -> http://api.jquery.com/on/ I saw a previous conversation thread that referenced an add-in called waitUntilExists which has this approximate effect, but only for a single names element at a time(plus looks like it may no longer work since jQuery 3...) Any thoughts would be appreciated!
  5. Hi there, This is my time with GSAP and I'm very exiting to learn this. I Want to create and slider navigation on some what curved line as shown in attached image. User can move the arrow downwords, (moving along the path), and based on how much it is moved i need to change the content of the slide. Can you please help me to achieve this. What i Thought was having a those green dots as svg path and arrow as image, and then use draggable plugin to move it along the path. But I'm not able to convert this logic into code. Let me know if that login is correct and how can i code it using gsap.
  6. Using Draggable I'm allowing users to drag an item from a sidebar into a canvas element in the center of the screen. I have code in place that only allows users to drop an item once it has entered a specific drop target, otherwise it returns to its start position. The canvas is a static size meaning that the size of a users browser window will alter how far an item has to be dragged before it is in the drop target (e.g. at smaller viewports you might only need to drag 50px to the right to hit the drop target but larger viewports that might be 200px). After an item has been successfully dropped I need to get the X and Y co-ordinates of the dropped item in relation to the drop target. For example, if I dropped in the very top left corner of the drop target, I expect the X and Y to be 0, 0. When logging the onDragEnd event I get multiple variations of X and Y values (clientX, clientY, layerX, layerY, movementX, movementY, offsetX, offsetY, pageX, pageY, screenX, screenY, x, y) but none are giving me what I want. I was wondering if there is an out-of-the-box method for retrieving this data or whether I'll need to work it out manually based on the position and size of my drop target? const that = this; const overlapThreshold = '100%'; let startX; let startY; const canvas = document.getElementById('canvas'); Draggable.create('#draggable-player svg', { // When initially pressing we want to record the start co-ordinates onPress() { startX = this.x; startY = this.y; }, onDragStart() { that.setState({ dragging: true }); this.target.classList.add('dragging'); }, onDrag() { if (this.hitTest(canvas, overlapThreshold)) { that.setState({ validDrop: true }); this.target.classList.add('valid-drop'); } else { that.setState({ validDrop: false }); this.target.classList.remove('valid-drop'); } }, onDragEnd(e) { console.log(e); if (that.state.validDrop === true) { that.addNewItem(e, items.PLAYER, e.x, e.y); } else { // If it isn't in the drop area send it back to starting position TweenLite.to(this.target, 0.2, { x: startX, y: startY, }); } that.setState({ dragging: false, validDrop: false }); this.target.classList.remove('dragging'); }, });
  7. Hi, folks Been using GSAP for a year or so and love it. Recently been working on some graphs using Chart.js and draggable (in a dashboard) For some reason when i apply draggable it stops the Chart.js animation from working. If i remove the draggable creation the Graphs animate fine. Any Ideas ??
  8. I've edited one of the codepens provided by Greensock and I've pretty much got what I need (minus the formatting don't judge me!) I'm having trouble though with using multiple dropAreas, I've set up the 15 divs I need as drop areas but can't get the JS to run through them all. I tried copying what was already there and applying the next div variable to it but then it only works for the last one. Probably not explaining this well but you'll see in the javascript I've got dropArea1 which works fine, then dropArea2 later on overrides this so dropArea1 no longer works but dropArea2 does.
  9. I was just wondering, as I'm completely new to GSAP ad Draggable. Is it possible to have a number of boxes in a vertical column and then have these so they either land in area 1 or area 2. This is for a sports management site and effectively the column is all registered players, area 1 are those in the starting line up and area 2 are the substitutions. My plan is to then loop through what is in area 1 to use a PHP cURL script to send SMS and Emails notifications to these players so I'd use a form that captures the data in area 1 and sends as a POST value to my . php file and then again for area 2 but with a different destination. I hope that makes sense and sorry if it's a bit vague but am a bit cautious of spending hours working through it if it turns out it's not possible!
  10. Wouter11

    Dynamic Bounds

    Hi! Recently I ran into Ueno's website and their about section is using GreenSock to display a gallery of photo's. But the thing is they have their bounds setup in a pretty unique way. The whole draggable section is overflowing but comes to a stop at a certain point. You can experience this by dragging the photo's underneath the "At your service" section. I would like to achieve a similar effect so that it is overflowing but still uses bounds when I scrolled to far. The problem is, I'm not sure where to begin. Anyone that can point me in the right direction or shoot me an example of how to do this? All other examples are using fixed bounds where the draggable layer can move in. If anything is unclear, please notify me and I'll try to extend this post with more info.
  11. hi this is related to another question i'm currently solving. and i found a solution. its all inside the draggable plugin if i can get a perfect answer for this question. i can update that post and share my solution. my question is how to limit draggable x or y value. eg: if i click and drag, i want to drag only 200px left or 200px top. depend on my draggable type. so how to get this thing done..
  12. I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex. But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS". https://codepen.io/TirochH/pen/eGqbNL Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage). https://codepen.io/PointC/pen/eWNRpe Hans
  13. Hey folks, I inherited some code, which introduced me to GSAP, and I've rapidly become a fan. While trying to implement some mods, I've run into a circumstance I can't find in the docs, so hoping someone here may have some thoughts. Starting point is a "template" <div/> which is static (no GSAP magic). On the mousedown() event for the template I clone a new instance of the div, and make it Draggable. (Note: because I have cloned it without changing offset it is in the same location but "in front" of the original div - color changes to indicate clone) This all works well, however I have to release the original mousedown (take my finger off the button), and then click-and-hold the mouse again in order to initiate a throw of the new object. In a perfect world, I would be able to "transfer" the focus/mousedown state to the newly created draggable div and immediately initiate the throw without releasing the mouse button and clicking again. I've tried passing the .focus() and triggering another .mousedown() but that doesn't appear to work. Not sure if there is a different event I should be firing or somethign else entirely... Any thoughts greatfully appreciated! Thanks, Shaun
  14. JohnH

    Animate before Drag

    Hi there, new to the forum, so first of all thanks for having me! I'm also new to gsap as well. The question I have is; Whenever I use 'Draggable' and I want to animate the object or element that is being dragged, I want to have it animate onmousedown so that as soon as the object is touched it expands. How can I do this as I've always had my animations run when the object is moved instead of animating before being moved. Is there a clever way gsap can do this or do I need to add a mousedown function? Thanks in advance, John
  15. Hey guys, need some help. svg symbol with draggable elements used so far - plain javascript? 1.20.3 tweenmax.min.js 1.20.3 draggable.min.js ok this is not crossbrowser - so look at this with latest chrome! sometimes things are jumping. -> screenshots from my pen (click, click drag - heavy tested)
  16. LanceH

    Draggable bounds

    Hi, I'm struggling to get the bounds setting right using draggable. I have an image that is 5100 x 3560 and I have it inside a div that takes up the viewport. I want to be able to drag the image around x and y until the top edge is level with the top of the viewport, bottom is level with the bottom etc. Using an element as the bounds will let the images bottom edge go all the way to the top of the view port - not what I need. I have gotten close with: var iw = 5100; var ih = 3560; var vw = $('#scroll').outerWidth(); var vh = $('#scroll').outerHeight(); Draggable.create("#test", { type:"x,y", bounds:{top: -(ih-vh), left: -(iw-vw), width: 5100, height: 3560} }); That seems to work perfectly horizontally but vertically, it barely moves. If I remove the height: 3560 from the above, the image can be dragged up the right distance so it's bottom edge is inline with the bottom of the viewport but I can drag it down way past the top edge being inline with the top of the viewport. Feels like I missing something simple? I did have this working fine with scrollLeft and scrollRight using movemove but touch screen devices didn't work at all.. so greensock to the rescue.
  17. Hi is anyone know how to create a mouse follow option with onpress activate draggable handler like this website. if you have any thoughts about this. please share with me.. https://gleec.com/
  18. Hi everyone, I've been playing around with Draggable and noticed a strange behavior. The mousedown event works fine if I add the eventListener to a draggable element using the lockAxis setting, but the default "x,y" won't trigger it. Am I missing something? I've put a link to a codepen which illustrate the issue. The green box will trigger the mousedown (right-click) and the red one is not.
  19. Hey everyone I've linked a draggable to other animations many times, but they always start/stop with the onDrag event. In this case, I need the animation to be based on the draggable onDrag position and it needs to continue animating until I release the draggable. The animation stops on release and the draggable element tweens back to 0. The simplest thing I could think of was using the ticker adding a listener onPress and removing it onRelease. Is this the best way to approach this? Anything more efficient or easier? Thanks.
  20. Hi all, been struggling with this for a long time now. Is there a way to tween a draggable, more specifically a type:"scrollLeft" element's position by clicking a button? Think of a draggable, scrolling left and right carousel - with a button. When the button is clicked the draggable element slides to the right 300px. I know there are methods to enable and disable the dragging, but I don't see a way to target the actual moving element. Even to manually go in and target the draggable item with a tween might work... but I can't seem to even find what moves! Thanks for any help you can offer!
  21. I'm having several issues, but one I am focused on atm, is that something seems to be conflicting between the draggable.min.js file and my PHP. It messes up the div sizes, when I add <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js"></script> to my php file. I'm sorry if this is a really dumb question. Thank you in advance for any help! warehouse.js EquipList.csv working10.php
  22. Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.
  23. ** upon further inspection a console.log(Draggable); comes up as undefined, This error is being thrown due to the Draggable module not being successfully included in the component. Good afternoon, I am using the npm library for gsap on my angular project, and have been attempting to implement this into an angular component. Error The error I am receiving is "ERROR TypeError: Cannot read property 'create' of undefined" Reference I have a fairly standard angular4 component pictured below. I did the standard "npm install gsap" I include the import statement for Draggable according to the npm repo for gsap Solutions tried I've looked on forums, and some past answers from 2016 say to include the library with a link in webpack, however, it seems like it would defeat the purpose of having a node_module to import.
  24. Hi, Is it possible to keep the OnClick event on the Draggable to be triggered including when the disable() method has been called on the Draggable element? From the Draggable documentation, the method disable() should disable the Dragging, not the whole element and its events. But it does. Using a JQuery.click on the element doesn't seem to be an option, as the click event is triggered during drag and drop, and using the mouse pointer location does fix the click on drag issue, but then the whole prevent bubble event gets messed up, and when there is a button inside the element. You can see it here. The only feasible way would be to make the OnClick event from Draggable work always, inclusive when disable() has been called. Is it possible to do so without having to change the Draggable.js library?
  25. Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.