Search the Community
Showing results for tags 'draggable'.
-
Hello, I want to know are there ways to do something similar to this (url below), i wish to use greensock as it need to be on touch device. http://subprotocol.com/system/tree.html Things i want to mimic is dragging the "green leaves" which will also pull the rest(other leaves and branches) along with it, the branches have this pull effect. - if yes, then where should i look at. - if no, can you suggest where else can i look at, definitely not verletjs. and then when u release, the "greens" bounce back to where it is (which i think can be done like https://greensock.com/draggable) thank you!
-
I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?
-
Hi, So I have a left sidebar with a bunch of Draggable elements that I want to drag over to the right side of the page. The thing is that the left sidebar is scrollable, and when the page height is too small, a scrollbar is shown to be able to see all Draggable elements. The problem with this is that by making the container scrollable, the content is limited to it's container size (Behaves pretty much like a overflow:hidden). Is there any good way to be able to drag an element outside of a scrollable container? So far I could come up with several approaches but none seems to be working fine. 1. Make the container overflow:visible when the user starts dragging the element, but this way the scroll position goes to the top and other UI artifacts may happen. 2. Clone the element to be dragged and put it outside the scrollable element as an absolute position over the parent element. But so far I was unable to perfectly align the cloned element with the parent element, and the move back animation may get to the wrong position if the user scrolls the sidebar while animating. Is there any "good" way to do this? Or any workaround that works in a less buggy way? P.D: The Codepen shows the minimum example where you have a bunch of elements inside of a scrollable area. When you try to drag it out of the scrollable area you will see it gets hidden. Any ideas how to overcome this issue? EDIT: So I finally implemented the method 2, and it seems to be working fine on PC, but there is some bug on mobile devices. It seems that on Mobile the onRelease method is never called from Draggable. This does works properly on PC. I updated the Codepen example. Test in on your PC and it will work. Test it on your phone, you will drag the element, but the element wont ever disappear. Is there any way to fix this or is this a Draggable bug? -
I'm using draggables to flip between pages on a site I'm building. If you look at my Codepen, the grey container represents my full screen (non-scrolling) website page. The orange area is what I want to drag and throw. However, I do not want to require the user to have their mouse over the orange area to throw it. They should be able to be anywhere on the screen. You can currently do that until you drag/throw it the first time. Then the grey/draggable container exposes an area that you can not grab to throw the orange. Hopefully this makes sense. I'm having a hard time articulating this. Ideally, I would like the grey area to never move, but accept the grab/drag/throw, then apply it to the orange container. Is this possible? I'm probably looking at this all wrong and it is something simple. At least I hope that is the case. Thanks, Rick
-
Hello, i'm starting with the Draggable https://greensock.com/docs/Utilities/Draggable plugin and this is my achievement by now I am trying to replicate this Drag & Drop Library: http://sunpietro.github.io/dragster/ -1) Pre-Drop-Hint -> Highlight the area where you gonna drop the element -2) Smooth drop animation -3) CloneBase -> Only draggable option / Copy elements from here, no possible to drop options -4) Move / Adapt column -> If we want to drop an element between 2, the column would be adapted -5) Trash zone -> Only drop zone to remove elements So i started by the point 1 & 2, and it gets weird how the element is dropped. Also i realize that the elements are animated via translate3D, so in case i would want to get that elements dropped into my slots, i guess i have to move into the slot after the transition. as i said, the animation is weird, not smooth like this one, and the code is basically the same. So i have a clone-base at the top, and the elements would be draggables & copies from there, to put into my grid. Can you help me first with the Weird animation & the cloneZone. Or if there is a sample case ( i didn't find it i would love to use it as a guide ) thanks in advance.
-
Hello, I'm having trouble synchronizing a progress bar with Draggable, I tried doing this simulating a Click event with Jquery, but it did not work well, I think the way improvement is using (Progress) but I did not identify which draggable function I I attribute this. Someone with a light?
-
Hi Folks, I think I'm missing something super simple, but I can't find it. In the vanilla demo hit test example an element from a "droppables" collection is used as a jQuery selector, and a "highlight" class is added tot hat element while the hit state is true and removed when it is false. The effect is that the element *underneath* the dragged element is highlighted. I want to invert that effect, and have the item that is being *dragged* highlighted if it is dragged over a droppable element. I expected to be able to do this fairly easily by changing the $(droppables[i]).addClass("highlight"); for $(this.target).addClass("highlight"); however this doesn't work. I've included a fork of the GSAP hit test demo as a codepen, and I've also added a couple of console log statements that show that the element being dragged is being assigned the additional "highight" class, but the visual effect isn't seen. Many thanks Shaun
-
Greetings I just converted my web game (link at bottom) over to GSAP using Draggable, TweenMax and TimelineMax! I launched the site over 10 years ago, built on YUI2. About 6 months ago I decided it was time to drag it into the modern age, so I set upon a total front end re-write, this time basing all animations and drag/drop on GSAP! I deployed the update 2 weeks ago. Since then about 1 million unique users have spent over 10.9 million hours playing. Not a single GSAP bug or issue has come up! GSAP has been ROCK SOLID. WOOT! I just wanted to THANK YOU for making an amazing product that's allowed me to do this massive re-write and launch without having to worry about the animation/dragging aspects. Thanks again! PS: The new GSAP based website is https://worldofsolitaire.com The old YUI2 version is here: http://legacy.worldofsolitaire.com
-
Hi, I'm having real issues with a draggable map I've created, specifically on devices using iOS. My animations all run nicely, however when I press and try to drag the map around, there's a good 4-5 seconds before the page responds, and then the move happens instantly, rather than smoothly. If necessary I can provide you with a link to view the development site if that helps, however, I'll need to send it privately if possible? There are a number of layers creating the map, all stacked on top of each other - might this have something to do with it? Any help you're able to give me would be greatly appreciated. Kind regards
-
I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
-
All, In the Draggable docs at https://greensock.com/docs/Utilities/Draggable there is reference under the "onThrowComplete" property to a "onThrowCompleteScope" that can change the scope of what is being passed to the onThrowComplete function. "By default, the scope of the onThrowComplete is the Draggable instance itself, but you may define an onThrowCompleteScope if you prefer, just like any other TweenLite or TweenMax." Presumably this can be used in the same fashion as the TweenLite/Max onCompleteScope, onStartScope, onUpdateScope, etc. settings. Maybe I'm missing the obvious, but I cannot for the life of me find any documentation or examples of using this mechanism - apart from passing it an empty object as '{}' - anywhere, including the TweenLite / TweenMax documentation, and would greatly appreciate a simple example of what the format for defining a scope to be passed to one of these functions looks like. Any suggestions or a pointer to any documentation I've missed would be hugely appreciated. Specifically, I want the onThrowComplete "this" context to refer to the target element, rather than the default draggable instance. I know I can get the target from within the draggable instance, hoewever I'm to have a single onUpdate function which I would also be calling directly based on other (non-draggable) actions. Many thanks!
-
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?
-
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.
-
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 (37.0.0.0)), 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 -
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! -
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.
-
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'); }, });
-
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 ??
-
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.
-
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!
-
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.
-
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..
-
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
-
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
-
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
