Search the Community
Showing results for tags 'draggable'.
-
I was using draggable on an SVG element and this was popping up, when testing my work in chrome , this warning pop up in the console log: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. It was saying it was coming from Draggable.min.js:14. I was wondering if i should be worried about this warning since i will be using this plugin on svg code during and after that time frame? Will the plugin will be updated for this or should i not worry? Brad -
Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
-
I'm trying to achieve 60FPS in my UI. I'm using an x,y Draggable, but cannot currently get a jank-free experience with Draggable which makes me so sad because otherwise I love this tool (and even joined the club). See the chrome profile timeline below. How can we fix this?
-
Hello, I am working with a banner that is 970x418. I am trying to create a parallax effect on y-scroll (drag). In order to do this, I assume that: 1) I need to create a "container div" with a "foreground div" and "background div," foreground on top of the background. 2) Set the container itself to scroll/drag and affect both div's together. 3) Change the speed the background div to be a little slower, in order to give the parallax illusion. So far, I haven't found anything that shows me how to work with dragging one item and using the info of that item to affect the positioning of another. I've seen sites that give code libraries like scrollMagic, but they are not easy when it comes to finding out how to do specific things, only what is shown in their examples. Please help.
-
Hello, First of all I'm still amazed by GSAP and your work, by far the best animation library out there, thank you guys! I'm using a horizontal dragger on a project and would like to use side arrows to be able to move to a certain position of the dragger area — without dragging. So, my question is; does a method exists within draggable to go to a specific value in the bounds? Here's my initialisation code: this.draggable = new Draggable(this.ui.container, { type: "x", dragClickables: true, throwProps: true, edgeTolerance: 0.25, edgeResistance: 0.85, bounds: { minX: 0, minY: 0, maxX: -Math.abs(this.max), maxY: 0 }, onDragStartScope: this, onDragEndScope: this, onDragScope: this, onDragStart: this.onTouchStart, onDragEnd: this.onTouchEnd, zIndexBoost: false, cursor: 'inerhit' }); Note that I'm not using the `scroll` type, but only `x`. Therefore I cannot use a `scrollTo` method. I was wondering if you had a similar method already in the plugin. I would simply like to add eventListeners to theses arrows and move each time by 200px (for example) the draggable container to the left / right. Thank you a lot for your work and help. Wish you the best for 2016, Baptiste
-
A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
-
Pradeep sent me this private message. Moving it here in the forum... I think you need to look at the dragClickables option. dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true. http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/Draggable/ ---------------- Hi, When i apply draggable event on a anchor tag it does not nork for me. eg:- <div>text</div>-- it work for me but when i add anchor tag on text <div><a href="#">text</a></div>-- it not work for me Here you can add anchor tag around the .dragclone div, then it does not work. Thank You in advance. Please help ~Pradeep ----------------------
-
Hi, How can I manually trigger an 'onClick' event in a Draggable object? More specifically, I want to trigger it from within the function called in reply to the 'onDragEnd' event. Thanks ! Elior
-
Hey all , I was doing a little experiment with Draggable and throwProps so the user could throw the draggable to a position and get a new panel from an info slider and I see a strange quirk in Internet Explorer. I'm using three snap positions [150,350,550] and then based on the index of the final snap position, I grab a new information panel to be shown, but IE sometimes ends on a number that is not in the snap array, but rather a lengthy decimal equivalent. I'll get 349.803101087 instead of 350. This results in my index query coming back as 0 so it flips back to panel 0. I see the problem and the fix is an easy Math.round(), but I found this odd and I'm curious if it was just Internet Explorer being its usual troublesome self or why exactly it won't consistently land on a whole number since it should be coming from the snap array. This is only happening in Explorer (FF and Chrome are fine) and not on every throw. I've put a console.log() in the code to show the final position so please watch that as you throw the draggable around. It might take a few attempts to produce the odd behavior. Again, easy fix - just more curious what causes it. Thanks.
-
Greetings, I have a question related to Draggable and my main timeline. To put this in some context, I create e-learning courses where the user has to drag a knob to select their answer (cooler than radio buttons, right?). No matter what the user answers, my main timeline will advance and always point the knob to the correct answer. This works fine for question #1. After question #1, the main timeline will move the knob back to a rotation of 0, and show question #2. However, when the user answers question #2, the knob will first reset back to rotation 0 and then tween to the correct rotation. It makes the knob animation twitch and look bad. I instead want it to tween from the point where the user left the knob. Hopefully the Codepen makes this more clear. Check the JS box for a couple comments starting on line 30. I have tried a huge number of workarounds, including clearProps, overwrites of all kinds, Draggable update(), fromTo's, and combinations of all of the above. Nothing has been effective except "overwrite: all", but that causes its own share of problems. I feel like I'm on the right track but can't wrap my head around how to make the Draggable's tweens play nicely with my timeline. Thank you for reading and please let me know if I can provide any more info.
-
Hello everybody! Help me understand) I have SVG tween animation consisting of steps 1, 2 and 3 and i have draggable element in container with lock axes. How i can move draggable element on x or y axis and play tween depending on the position of the draggable object? Something like this example but with tween and depending on position) thank you)
-
I'm using GreenSocks TweenMax and the Draggable plugin to move an element around. I also use the autoscroll feature to scroll the container when the mouse cursor is near the edges. How ever, I would prefer to trigger the scroll when the edges of the elements is near the scroll container instead of the mouse pointer. Is this possible?
-
Hello We are creating drag and drop website creator called ucraft.me and we are using GreenSock draggable. Everything is working except one thing. Our system is working like this: We have different areas where we can drop new objects. When dragging(and holding) is starting (on dragStart) the system must generate additional height of the page, which adds more scroll to my browser. Now we should be able to drop the held element on the top of the screen as well as on the bottom of the screen. As my page height was changed before, the bottom area is more down and is unreachable for me during the holding process as GreenSock autoScroll is not letting me to get there. It seems that GreenSock doesn't know the new generated page height. Please help! Best, Ash.
-
I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?
-
I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <!-- these 2 were added after page load, but don't work like the others do as a trigger --> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding? Thanks!
-
If anyone has any insight here, a MILLION thanks in advance. There is probably a simple way to to this, but I've been struggling to figure this out for days and I'm literally about to lose my mind. I am dragging a placeholder item (GSAP Draggable) from a sidebar and dropping it onto a pannable/zoomable "stage" which uses CSS transforms (jquery.panzoom). When dropped, the draggable element is removed and should be replaced by a new element with absolute positioning inside the panned/zoomed "stage" in the exact same position, visually speaking, regardless of how the stage has been panned/zoomed. I am close, but the calculated position is only correct when the scale is at 1, and I can't figure out how to account for the scale programmatically. I have tried a million things but I just can't wrap my head around it. Codepen here: http://codepen.io/anon/pen/meYWvL You can see that when you zoom (using the mousewheel) to Scale 1 it works they way I want, but at other scales I can't figure out how to account for the difference. The maths I am using now (only works when scale is 1): $(theNewItem).css({ 'top': dropPosition.top + (currentY - (currentY * 2)), 'left': dropPosition.left + (currentX - (currentX * 2)) });` Notes on the code: dropPosition is the $.offset() of the dragged element (relative to the window) at the moment it is "dropped", and currentY and currentX is the transformed x,y values of the container element I am trying to add the new element to, which at scale(1) could be considered 0,0 relative to the window. Side note: (currentY - (currentY * 2) is my derpy way to convert the negative number used in the transform matrix to a positive number since I don't know of any other way to convert +/- off the top of my head. -
Hello, I have some issues with `Draggable` and applying its bounds: First of all, creating an instance of Draggable will return an object, which seems pretty weird. It means that `this.dragger` could be accessed only with this.dragger[0]. this.dragger = Draggable.create('.section', { dragClickables: true, type: "x", bounds: { top: 0, left: 0, width: 2000, height: 0 }, edgeResistance: 1 }); this.dragger[0].applyBounds(); But calling `this.dragger[0].applyBounds()` will not update it; do you have any ideas why? I'm using the Draggable plugin from the `browser` field in the package.json as the plugin doesn't work with a regular `import` or `require` from npm (see - https://github.com/greensock/GreenSock-JS/issues/117) Thank you for your help! Baptiste
-
Hi, I have written a toggle switch using draggable with the snap property set to the dimensions of the slider. For example: snap:[0,47] works just fine. But because I am developing for mobile I cannot use hardcoded dimensions. So, I have tried setting the snap after Draggable.create as follows: var drag0 = draggable[0]; drag0.snap = [drag0.minX, drag0.maxX]; But, this does not seem to work. Is there a way to make this work? P.S. This is my first code pen.
-
Hi. From inside the callback method of the addEventListener, is there a way to get a relative reference to the draggable instance? In the codepen, to retrieve the instance inside the options callback, I use "this". Using "this" inside the addEventListener callback retrieves the target element (not sure why because the listener is attached to the draggable instance). it would be preferable for me to use the addeventlistener way but in my situation I have many draggable instances and would like to access their properties and methods from inside the same callback. Let me know if that doesn't make sense. Thanks.
-
Hello, I have been able to use Draggable to create a very nice slider control that controls font-size. There is one div, which is the slider bar, and another the thumb. My only problem is that I need to set a starting X position for the thumb, that is computed from the current fontSize. The math is working, except that I do not know how to get the this.minX and this.minY values before the slider is used. The documentation mentions translation.transform, but I have no idea how that would be used in my javascript code. The javascript is as follow: If needed, I will add a code pen: function startDraggable(fontSize, ptMin, ptMax) { var sampleNode = document.getElementById('sampleText'); var ptRange = ptMax - ptMin; var startPos = initialPosition(fontSize); TweenMax.set('#thumb', {x:startPos}); Draggable.create('#thumb', {type:'x', bounds:'#slider', onDrag:function() { console.log('x', this.x, this.minX, this.maxX); resizeText(this.x, this.minX, this.maxX); }}); function initialPosition(fontSize) { var slider = document.getElementById('slider'); console.log('local left', slider.offsetLeft); var bounds = slider.getBoundingClientRect(); var minX = bounds.left; var maxX = bounds.right; console.log('found bounds', minX, maxX); var x = (fontSize - ptMin) / ptRange * (maxX - minX) + minX; resizeText(x, minX, maxX); return(x); } function resizeText(x, min, max) { var size = (x - min) / (max - min) * ptRange + ptMin; sampleNode.style.fontSize = size + 'px'; } }
-
When calling Draggable.Create() on any element on the page, there is a momentary blip of horizontal and vertical scrollbars in IE11 (works fine in IE 9, 10, Chrome, Firefox, Safari). In the codepen I set up a case where 1000 divs have the Draggable applied, but the issue still exists when applied to a single element. I set it up this way so it could be easily demonstratable and the scrollbars would appear for a longer period of time. On a site with a lot of elements and extensive javascript the scrollbars appear long enough for the user to notice. http://codepen.io/anon/pen/gaBYGe
-
Hello, I am using the Greensock Draggable as a container with several child elements. Now the css translate3d(Npx, Npx, 0px) is added to the the Draggable. But the translateZ 0px causes every child element to be blured. When I overwrite it with Developer Tools to 1px the elements arent blured anymore. Is there a way to permanently add translateZ(1px)?
-
I have some code that checks conditions in the onDragStart handler. I'd like to be able to cancel the drag if a set of conditions are not met. I had assumed that returning false from handler would do it, but was wrong. Is there any clean way to cancel a drag in this case?
-
Hello everybody I'm working on a media gallery that uses Draggable ('rotation') to navigate. It is has many dependencies. Therefore it's hard to reproduce a simple codepen version. But perhaps the problem rings any bells here: Firefox refuses to handle clicks/touches correctly inside the Draggable and its sub-elements. It is ONLY FIREFOX - on all platforms. I never thought I would ever say this but: “Even IE works fine!”. My desired Draggable settings are: a. dragClickables:true, b. allowEventDefault:false, I get a <button> element work when I change a or b or both. Whereas <button data-clickable =”true”> does not help at all. Whatever I do, the controls of a nested <video> never work in Firefox. Although the video works. It can be started with a right-click. It is only the 'click' event. All other events work (rollover, mousedown...). Even the 'click' partly works. An addEventListener ('click', funct) fires. But at the same time the CSS :active is ignored. The script works like a charm in all other target browsers. Even on the iPhone the videos (or better their stills) smoothly rotate and you can open them. When I disable( ) Draggable all comes back to life again. Has anyone ever experienced this kind of trouble in Firefox? Any hint is very appreciated.
-
I'm interested in creating a draggable div that can be translated or rotated depending on some criteria, for example: rotate if CTRL is pressed, translate otherwise...or, translate if the mouse is clicked near the center of the object, rotate if the mouse is clicked near the edge of the object. The method I've tested involves detecting the CTRL key up/down events and killing the existing translate/rotation draggable and creating the other one. This works except that after an object that has been rotated, then translating it causes additional rotation. Any suggestions?
