Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'draggable'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. So, I have a small problem. I want to be able to customize things in the throwprops plugin, like friction and bounciness. But it doesn't let you do anything like that, so I wondered, is it possible to combine the functionality of the two plugins?
  2. Hi there, I am having trouble changing window scrolltop on drag an item. I'd like to create kind of minimap of may page while draging window scroll to position. But as soon as I add window scrollTo animation everything is flickering and I have weird y values... Any ideas? Draggable.create('.el', { type:"y", cursor:'drag', edgeResistance:0.5, zIndexBoost: false, lockAxis:true, bounds:'.drag', onDrag:function(e){ window.scrollTo(0,this.y*3 ) } });
  3. I am using pan/zoom to zoom/pan to an element in an svg, which works great the first time. Then after dragging it, it will not position correctly again. To pan/zoom I tween the viewBox using values from the element's getBBox(). Is it possible to sync the draggable plugin with the tween library when tweening the viewBox? Would it help to create a child svg, and tween that and drag the parent svg? I have tried many ideas from the forum, including clear(), onUpdate.
  4. I'm looking for some ideas to use a large (2000x1000) world map inside of a small container (1024 x 768). I set the wrapper as the "bounds" and this worked great in Chrome, but I noticed that Firefox didn't like this and had weird bounds behavior (basically tries to force the map inside the smaller wrapper, but fails). I think Firefox doesn't like that the world map is bigger than something it's supposed to be bound inside of. What I need is sort of like bounds, but not exactly. I need it to disallow dragging the map edges "within" the parent wrapper. That way I can pan all over the map without showing any "dead space" inside of the container. Any ideas?
  5. Hello, I trying to create a top navigation bar draggable on desktop and mobile but have some issue with the following case : Basically I need to have a container (bounds) smaller than the navigation bar (element) that I need to drag inside. You can have a look at the following jsfiddle. https://jsfiddle.net/biquetto/4th0sfp2/28/ Regards
  6. Does anyone have any idea how to get the percentage of a dragged item using the Draggable plugin? I'm looking through the docs and I don't think percentage a property/method, unless I'm overlooking it. I'm guess I probably need to rock my own logic on the drag event. Thanks for any tips!
  7. I've tried a couple of things now but I need help with this please. I have a draggable block that I want to restrict from going past the top of the screen but should be able to drag past the bottom fully. If you view the pen I did, you will see an arrow/tab at the bottom. Ideally this tab will be halfway visible at the bottom and when the block is dragged all the way up the bottom half should be visible plus 5px of the grey background. So when dragging the red block to the top it should stop 5px before so I don't see the grey peeking out at the bottom. So far I can drag it all the way and then I did some checks to just get the red block in place but I have to get those bounds right. Like I said, I tried using hitTest and some of my own logic and checking the element Y position etc but my knowledge with this is limited.
  8. Hi guys! I have the following problem: There is a draggable with attached methods onPress and onRelease. The draggable component has a button child. When I click on the draggable but outside of the button both events get fired. But when i click on the button only the onPress event gets fired (you can check this in the browser console). Same result happens if I put an input as a child and click on it. Codepen: http://codepen.io/anon/pen/jqqyEQ I need a way to fire both onPress and onRelease events when I click on buttons and inputs that are children of the draggable component. Thanks in advance!
  9. Hello there Greenies, i would need some assistance if possible. Here goes. Im working on a pack of draggable elements that are dynamically built from sqlite query. Heres my issue. If elements are manually placed in the project they are all draggable, no issues there but when the screen is populated with database created elements they are not. I have tried waiting for query to complete and fire draggable events but it wont budge. The only way i made it work is to call the script with each element and that destroyes the logic and performance like theres no tomorrow (thats prolly cause i mangled it like a butcher). Please have mercy with comments im kinda new around here. Thanks in advance, Jim. CODE: Im using this draggable script (found on codepen) var container = $("#clone-container"); var scrollBox = $("#scroll-box"); var dropPanel = $("#drop-panel"); var tiles = $(".tile"); var threshold = "10%"; tiles.each(function() { var element = $(this); var wrapper = element.parent(); var offset = element.position(); var scope = { clone : element.clone().addClass("clone").prependTo(container), element : element, wrapper : wrapper, width : wrapper.outerWidth(), dropped : false, moved : false, get x() { return getPosition(wrapper, offset).x; }, get y() { return getPosition(wrapper, offset).y; } }; scope.draggable = createDraggable(scope); element.on("mousedown touchstart", scope, startDraggable); }); // START DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function startDraggable(event) { var tile = event.data; TweenLite.set(tile.element, { autoAlpha: 0 }); TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 }); tile.draggable.startDrag(event.originalEvent); } // CREATE DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function createDraggable(tile) { var clone = tile.clone; var wrapper = tile.wrapper; tile.draggable = new Draggable(clone, { onPress : setActive, onDrag : collapseSpace, onRelease : dropTile }); return tile.draggable; /////// function setActive() { TweenLite.to(clone, 0.15, { scale: 1.2, autoAlpha: 1 }); } function collapseSpace() { if (!tile.moved) { if (!this.hitTest(wrapper)) { tile.moved = true; TweenLite.to(wrapper, 0.3, { width: 0 }); } } } function dropTile() { var className = undefined; if (this.hitTest(dropPanel, threshold) && !tile.dropped) { dropPanel.append(wrapper); tile.dropped = true; className = "+=dropped"; $('#myModal').modal('show'); } moveBack(tile, className); } } // MOVE BACK ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function moveBack(tile, className) { var clone = tile.clone; var element = tile.element; var wrapper = tile.wrapper; TweenLite.to(wrapper, 0.2, { width: tile.width }); TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done }); if (className) TweenLite.to([element, clone], 0.3, { className: className }); function done() { tile.moved = false; TweenLite.set(clone, { autoAlpha: 0 }); TweenLite.set(element, { autoAlpha: 1 }); } } // GET POSITION :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function getPosition(wrapper, offset) { var position1 = wrapper.offset(); var position2 = container.offset(); return { x: position1.left - position2.left + offset.left, y: position1.top - position2.top + offset.top }; } And this would be my database query. function onDeviceReady(){ myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"}); myDB.transaction(function(transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [], function(tx, result) { }, function(error) { }); }); myDB.transaction(function(transaction) { transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) { var len = results.rows.length, i; $("#rowCount").html(len); for (i = 0; i < len; i++){ $("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>"); } }, null); }); } together they look like this. function onDeviceReady(){ myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"}); myDB.transaction(function(transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [], function(tx, result) { }, function(error) { }); }); myDB.transaction(function(transaction) { transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) { var len = results.rows.length, i; $("#rowCount").html(len); for (i = 0; i < len; i++){ $("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>"); var container = $("#clone-container"); var scrollBox = $("#scroll-box"); var dropPanel = $("#drop-panel"); var tiles = $(".tile"); var threshold = "50%"; tiles.each(function() { var element = $(this); var wrapper = element.parent(); var offset = element.position(); var scope = { clone : element.clone().addClass("clone").prependTo(container), element : element, wrapper : wrapper, width : wrapper.outerWidth(), dropped : false, moved : false, get x() { return getPosition(wrapper, offset).x; }, get y() { return getPosition(wrapper, offset).y; } }; scope.draggable = createDraggable(scope); element.on("mousedown touchstart", scope, startDraggable); }); // START DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function startDraggable(event) { var tile = event.data; TweenLite.set(tile.element, { autoAlpha: 0 }); TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 }); tile.draggable.startDrag(event.originalEvent); } // CREATE DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function createDraggable(tile) { var clone = tile.clone; var wrapper = tile.wrapper; tile.draggable = new Draggable(clone, { onPress : setActive, onDrag : collapseSpace, onRelease : dropTile }); return tile.draggable; /////// function setActive() { TweenLite.to(clone, 0.15, { scale: 1, autoAlpha: 1 }); } function collapseSpace() { if (!tile.moved) { if (!this.hitTest(wrapper)) { tile.moved = true; TweenLite.to(wrapper, 0.3, { width: 0 }); } } } function dropTile() { var className = undefined; if (this.hitTest(dropPanel, threshold) && !tile.dropped) { dropPanel.append(wrapper); tile.dropped = true; className = "+=dropped"; $('#myModal').modal('show'); } moveBack(tile, className); } } // MOVE BACK ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function moveBack(tile, className) { var clone = tile.clone; var element = tile.element; var wrapper = tile.wrapper; TweenLite.to(wrapper, 0.2, { width: tile.width }); TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done }); if (className) TweenLite.to([element, clone], 0.3, { className: className }); function done() { tile.moved = false; TweenLite.set(clone, { autoAlpha: 0 }); TweenLite.set(element, { autoAlpha: 1 }); } } // GET POSITION :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function getPosition(wrapper, offset) { var position1 = wrapper.offset(); var position2 = container.offset(); return { x: position1.left - position2.left + offset.left, y: position1.top - position2.top + offset.top }; }} }, null); }); }
  10. Hey guys, Love GSAP so far. Great job with it! Having an issue where if you throw a lockAxis draggable horizontally, interrupt the throw with a vertical drag, and while you're dragging vertically, have it tweened horizontally. (Don't let go of the vertical drag, yet.) When the horizontal tween completes, the next pixel you vertically drag will jump by the vertical distance you dragged it while the tween was running. (I think that's the distance it jumps.) I've found a hacky workaround to deal with this (by offsetting elements by the jumped distance), but would like to properly handle dragging and tweening the same object. Draggable.update() in the onUpdate event of the tween makes things really nutty. http://codepen.io/trenthm/pen/QNwKXz
  11. tupic

    draggable on touch

    Dear Community I am new in webdevelopment. So I started my first cordova project. In the codepen-example you can see my code. It works well on desktop browsers. But when I test my code on an mobilephone the img #main-menue-knob can't get dragged. Is there any eventlistener that I have to add, that the drag-function works on a touchevent? Thanks for support Tupic
  12. 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?
  13. 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.
  14. 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.
  15. I'm having fun getting Draggable and TweenMax working with RequireJS (as part of a Durandal project). I think there might be a bug in Draggable, it looks to me like it is missing a dependency definition for CSSPlugin. The define for it looks like this: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite"], function(EventDispatcher, TweenLite) { On line 1757 CSSPlugin gets referenced as a global object: setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.setTransformRatio || CSSPlugin._internals.set3DTransformRatio) This line fails with an exception when I am loading Draggable via RequireJS. I have fixed it by changing the define call to: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite", "plugins.CSSPlugin"], function(EventDispatcher, TweenLite, CSSPlugin) { Does this look like a valid fix or am I missing some other reason why this call to CSSPlugin as a global object should be like it is ?
  16. 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.
  17. 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
  18. 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
  19. 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 ----------------------
  20. 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
  21. 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.
  22. 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.
  23. 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)
  24. 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?
  25. 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.
×