Jump to content

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


  • 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. It is possible to get the value while the wheel is rotating. Not the only endValue? I need the value to scroll a list og symbols and text in a div. As an old iPod. Troels Fiig
  2. Try out picadipity.com to see GreenSock in action! From your help I was able to build a control that features infinite looping of pictures using modifiers. The control also supports draggable and throwable behavior with stops at notches that centers the pictures. I am using the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> <script th:src="@{js/greensock/ModifiersPlugin.min.js}"></script> <script th:src="@{js/greensock/ThrowPropsPlugin.min.js}"></script> This has been great fun developing this control!
  3. I'm wondering if there is a way to know if the draggable element hits the bounds i have defined for it? I would like to shoot off a function or some code when it hits the edge of the bounds area.
  4. I don't have a CodePen url as I don't think it's necessary to explain the issue but you'll be able to see what I mean on our website www.britishwebsites.co.uk With a large draggable area, now that ios10 does not allow a developer to easily override the ability to pinch and zoom, it becomes necessary that the pinch-zoom functionality on a draggable area works. If you zoom into a large draggable area (our big map/island) you can not then zoom out again. You would have to zoom in on another part of the website then scroll into the map view, but it is possible to get completely stuck. Are there any plans to make it so the draggable plugin can allow multiple touches to perform the default behaviour (i.e. zooming)? I know I can disable pinch zooming through javascript still, but I suppose it is a good thing to allow users to zoom in on websites which is why Apple have decided to ignore user-scalable=no now.
  5. I'm using the Greenscok Draggable as a themostat. The temperature increases or decrease at every 18 degrees rotation (also based on clockwise or counter-clockwise). I'm grabbing the rotation and using the remainder operator (%) and if it is equal to 0, the temperature changes. With the dial at 0 (rotation), the temperature is at 18 and at -180 (rotation), the dial should reach 26 degrees. However, the rotation and the temperature don't seem to be working in unison. Just to add, the temperature should be at 22 degrees at -90 (rotation). Here is the codepen: http://codepen.io/jetchy/pen/EgAdgP Thanks.
  6. Hello, A few weeks ago I started with GSAP and now I also learned some basic skills in Three.js I have made a object and I am able to rotate it with GSAP, but I would like to make it draggable with the mouse. Can anyone help me making this happen? When I create a drag for the mesh ( the object). The object dissapears. This is my Codepen: http://codepen.io/xleooow/pen/YGvjNA Any help is appreciated.
  7. Hi guys, Is the a way to enable multi touch / finger on a draggable object? i.e - Current draggable doesn't allow you to drag with more than one finger. Is the a way to add that feature ? Thanks.
  8. I keep getting a lot of questions asking about creating sortable lists with Draggable, so I'm just going to make a post about it. My sortable grid example is outdated, and I no longer use that technique, so I'm not going to update it. It relies on hit testing, which I would no longer recommend doing for grids/lists. A better way is to create a model of your list, and map the location of your draggable to that model. This is real easy to do using arrays. You can use the index of an array to represent a cell location in the grid. Draggable already creates an array for you if you use the .create() method, so you could use that if you really wanted to. But first you need to figure out the size of the cells in your list. If everything is uniform, you could probably just divide the size by the number of items in that dimension. If my list is 400px high, and there are 4 elements, the cell size for a row is 100. Notice how the cell size may not be the same size as your element. The cells are in red. When you drag, you can figure out the index of a cell like this. var index = Math.round(this.y / rowSize); This can result in errors if you drag outside of your list, so you should clamp the values like this. var index = clamp(Math.round(this.y / rowSize), 0, totalRows - 1); function clamp(value, a, { return value < a ? a : (value > b ? b : value); } Now you can easily determine where everything is. You also need to keep track of the last index, and compare it to the index you calculate while dragging. If they are different, this means your draggable is inside a different cell, so you need to update your layout. Before you can change the layout, your first need to change the items in your array. Here's a function you can use to move stuff around in an array. arrayMove(myArray, oldIndex, newIndex); function arrayMove(array, from, to) { array.splice(to, 0, array.splice(from, 1)[0]); } Now that your array is in the correct order, you can update the layout. If you were using an array of draggables, you could animate the entire layout like this. myArray.forEach((draggable, index) => { if (!draggable.isDragging) { TweenLite.to(draggable.target, 0.4, { y: index * rowSize }); } }); That's pretty much it! Doing it this way is not only easier, but it performs a lot better, making it really smooth. I made a demo based off of this Framer.js example. It's about 100 lines of code, and is pretty easy to understand. For comparison, The Framer.js example is about 180 lines of code.
  9. Hi everyone, Not necessarily having a problem with code to fix but need suggestions on how to approach an issue. I'm working in a mobile application that's running Knockout to create a SPA. I'd like to use draggable to handle the mobile support of dragging since it does so well. However, the nature of my problem is dom injection. Draggable looks for an element selector on page load to create it's logic. However in the SPA architecture elements are dynamically added and removed to the dom based on user interaction. I'm trying to find a way that I could create a generic class which if used would automatically make the element scrollable. I was thinking of something along the lines as Draggable.create(".scroll-container", {type:"scrollTop", edgeResistance:0.5, throwProps:true}); This works the way I want it if the element is already in the DOM. Is there a way I could have this function look for .scroll-container to show up in the DOM? Not sure if this is a GreenSock question or not. gonna check on Knockout forums as well but I have to assume this is an issue others have run into and felt it was worth checking here.
  10. Hi, I am using the Draggable plugin and I need to enable/disable it sometimes. I can't find a sample on the help documentation to control this. The follow exemple seems not to work : Draggable.enable(); Thanks for your help.
  11. i can set up a trigger area and get it to work, but if there are more than one draggable elements on a page then moving one item using the trigger area move both items together, things i have tried that have not worked trigger area as class (div header) only having one div having a trigger property setting two unique ids for trigger areas loading the div separately any ideas of what else I could try???
  12. Is this possible with Draggable? In a banner I want to drag a road jpg horizontally, and have a car move along the road as I drag the road jpg. So the car stays in the same spot horizontally, just moving up and down and turning as needed. if it is possible could someone share a link related to it? Thanks
  13. I'am trying to get general idea how to get current value of rotation on a div object using Draggable rotation property. Any help would be appreciated.
  14. Hi, Is there a way to preserve position fixed on children elements when apply Draggable on the parent element? Thanks in advanse
  15. Hi! Im building a thing where I drag a element and check with hitTest for another element. I need to change the DOM structure so the dragger element gets inside ".drop-here" element as soon the hitTest is true. It works fine but the draggable elements gets jumpy when dragging to the ".drop-here" area. I need to reset/update the coordinates I guess but dont now how. I tried using draggable.update() with no success. Any suggestion to solve this problem? Many thanks!
  16. Hi, guys! I have a problem with minimumMovement parameter in Draggable. There is a site menu with several clickable links. I want to be able to drag the entire menu even if mouse cursor (or touch) is above the <a> element. But now I can drag it only if I press on empty area of the menu. You can check the actual version right here: http://nordskill.com/dock/argish/index-about-us.html But you have to squeeze the browser window to "mobile" width to see what I'm talking about. The DOM structure looks like this: <menu class="nav"> <ul> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> </ul> </menu> JS: Draggable.create(".nav", {type:"x", edgeResistance:0.75, throwProps:true, minimumMovement:2, bounds:window});
  17. I'm having an issue with the draggable plugin on our new website. It was working before and I can't seem to work out what has changed. I found a few topics but the resolutions didn't appear to be relevant to my situation. The website is https://www.britishwebsites.co.uk - A user can drag the map around and I'd like for the entire map to be draggable (including the landmarks/links). I've also got a click event on the links (added using jQuery) to override standard functionality using event.preventDefault(); On desktops and iOS devices the behaviour is as expected, however on Android you have to long tap or tap lots of times in quick succession to trigger the click event and show a category. I'd prefer not to rework the functions to work with the touchstart/mousedown and touchend/mouseup events while manually detecting the amount the map has moved, but wondered if this is the only solution? I cannot seem to isolate another issue and there are no touch events with preventDefault or stopPropagation applied. This is my config for initialising draggable: var draggableConfig = { type:"x,y", edgeResistance:0.75, bounds:map.elems.$mapBar[0], //trigger:map.elems.$mapCanvas[0], throwProps:true, zIndexBoost:false, dragClickables:true, onThrowUpdate:map.update, onDrag:map.update, onDragStart:function(){ map.updateMessageSequence(true); if(map.lastDragTime === false){ map.dragStartTime = new Date().getTime(); } }, cursor:map.customCursor ? "none" : "move", force3D:true, overshootTolerance:0.2 }; this.draggableInstance = Draggable.create(map.elems.$mapCanvas[0], draggableConfig); this.update.call(this.draggableInstance[0]); The click event for the links which I've tried applying both before and after initialising Draggable: map.elems.$clickable.on("click",function(e){ e.preventDefault(); var category = $(this).attr("href"); woopra.track("mapClick", {category:category}); ga('send', 'event', 'Map', 'Click', category); mapCats.changeCatState(category); }); The only other code I believe may be relevant is the touch events on the SVG shapes overlaying the map: svgMouseEvent:function(e){ e.preventDefault(); var $area = $(this); switch(e.type){ case "mouseover": case "touchstart": if(map.customCursor){ map.elems.$cursor.addClass("finger"); } $area.data("$matchingLandmark").data("mouseover",true); new TweenLite.to($area.data("$matchingLandmark")[0],0.5,{autoAlpha:1}); new TweenLite.to($area.data("$matchingLandmark").data("$labelEl")[0],0.5,{autoAlpha:1}); break; case "mouseout": case "touchend": if(map.customCursor){ map.elems.$cursor.removeClass("finger"); } $area.data("$matchingLandmark").data("mouseover","tween"); map.update.call(map.draggableInstance[0]); break; } } Thank you in advance if any help can be offered.
  18. This is strange. Maybe someone has encountered this before. The codepen for this post is based on this one from some time ago: http://codepen.io/swampthang/pen/dXqaZd?editors=1010 The only difference in that one and the one I added as the Codepen for this post is I'm dynamically generating a simple SVG and attaching the transform handles rather than starting out with an SVG and transform handles already there. You can see what was there in the HTML commented out. The structure is exactly the same - an SVG container that has a group inside it containing the main SVG - the one I'm dynamically generating. The old version, with the SVG already in place, had the function setTransforms() which is the same in this new version. The new functions are: addCircle(); setHandles(); The first one creates the SVG and appends it as a child of the group container. The setHandles function adds the transform handles. When you click the Make Circle button, everything seems to work fine except for the resize Draggable. The crazy thing is, I can see the transform being added but it's not being calculated accurately. Here's the thing that's really puzzling me. If I go into Debug mode in the Codepen and edit the dynamically created SVG with the circle by adding... xmlns="http://www.w3.org/2000/svg" ...to the SVG, it starts working. But I tried adding that dynamically and it didn't make any difference. In fact, if I add it dynamically as part of the creation of the SVG, it still doesn't work. But, as in the first example, if I edit the SVG in Inspector by actually deleting the xmlns ="http://www.w3.org/2000/svg" it starts working again. It seems like a timing issue to me but what's crazy is Draggable is applying a transform - just not the correct one.
  19. lifvic

    Drag Action

    Hi, It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time. Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time. My thought process of creating this animation is: head and tentacles rotate, scale and move -- the original state, stored in the original function function original() { tlAll .to(total, 30, { bezier:path, ease:Power2.easeInOut } ); tl .fromTo(head, 3, {scale: 1, y: 0}, {scaleX:.8, scaleY:1.2, autoAlpha: .8, ease:SlowMo.config(20)} ); feetLeftTl .to([top_first_left, bottom_first_left, top_sec_left, bottom_sec_left], 3, {y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}); feetMdTl .to([top_middle, bottom_middle], 3, {y: 10, scaleX: 0.8}); feetRightTl .to([top_sec_right, bottom_sec_right, top_first_right], 3, {y: 10, scaleX: 0.8, rotation: 10, ease:Sine.easeInOut}) .to(bottom_first_right, 3, {x: -4, y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}, 0); TweenMax.to("#light feGaussianBlur",3,{attr:{stdDeviation:5},repeat:-1,yoyo:true}); } the whole jelly fish can be dragged to move towards left or right, during which the head and tentacles rotate slightly to the other direction to create a sense of water resistance when the dragging is finished, the jellyfish should go back to its original animation -- the part that I can't figure out Draggable.create("#total", {type:"x,y", edgeResistance:0.65, bounds:"svg", throwProps:true, autoScroll:true, onPress:function() { startX = this.x; startY = this.y; }, onDrag:function () { var xChange = this.x - startX; var yChange = this.y - startY; if(xChange < 0) { //to the left TweenMax.to(head, 1, {rotation:5}); TweenMax.to(feet, .6, {y: 15, rotation:-10}); } //to the right else { TweenMax.to(head, 1, {rotation:-5}); TweenMax.to(feet, 1, {y: 10,rotation:15, ease:SlowMo.easeInOut}); } }, onThrowComplete: function () { var reset = new TimelineMax(); // // // reset var newhead = new TimelineMax(); var newfeet = new TimelineMax(); newhead.to(head, .5, {rotation:0}); newfeet.to(feet, .5, {y:10,rotation:0}) reset .add(newhead,0) .add(newfeet,0) .add(feetLeftTl,0) .add(feetMdTl,0) .add(feetRightTl,0); }, }); But now, the tentacles stop rotating and scaling after the jellyfish being dragged and I checked the code over and over again but could not find a solution. Please advise on this problem. Thank you so much!!
  20. Ok, so I'm pretty new to GSAP, but loving it already. Only thing is, I'm having difficulties figuring out how throwprops is initialising. Pen in question http://codepen.io/casperovergaard/pen/WxqbbK As per the forked pen, I'm running the robust TweenMax library (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js), which should suffice in terms of plugins, right? Or so at least I'm interpreting it from https://greensock.com/throwpropsplugin – hit download, include the TweenMax library, and you're set to go with ThrowProps. Then include Draggable as a separate plugin (https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js), as stated under the download section of https://greensock.com/draggable Okay, a lot of links, but what I'm trying to conclude is that when I initialise TweenMax and Draggable, ThrowProps is not working. I can see that on every pen out there, ThrowProps is initialised as a standalone plugin (often through http://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js), but when trying that script source in my local dev environment, I'm redirected to a 'not allowed' page. If someone could give me a hint in terms of how the various plugins and libraries work together and should be initialised, it would be much appreciated
  21. Hi guys, I have a three column grid with images that the users can scroll (kind of an infinite scroll) simultaneous using Draggable. I have run into an issue where at this point only one user can drag at a time. Any ideas on getting multi drag at the same time working? Thanks
  22. I'm surprised I couldn't find more on this. Perhaps my lack of searching skillz ? It appears that using Draggable and hitTest() only tests against a single test object. I tried using a jQuery selector (containing multiple elements) but only the first element is "tested"... Draggable.create($('.dragElement), { onDrag: function () { // dragging if(this.hitTest($('.dropElements'), 10)){ // Problem. This should be testing against more than one element. // over one of the drop zones console.log('hit'); } } }); And if this is possible, how can I know which element was "hit"? Thanks!
  23. Hi, I'd like to know how to detect if i'm dragging up or down, do you know if there's a way to do it? Thanks
  24. Hi! I've just discovered GreenSock yesterday and the whole suite of products and it's kinda awesome. Learning the basics is very simple and even more advanced stuff is pretty accessible. But sadly I'm facing an issue with Draggable. I've noticed that it it's not possible to drag an element out of a scrollable div. The element just keeps scrolling in it's own div, but he can't escape it's own div. To clearify the situation: I'm buidling a scrollable bar at the top of the page (which kan be hidden/shown). That bar contains draggable elements that will be dragged onto an element that is somewhere at the bottom of the page. Is it possble to disable some kind of CSS in the onDragStart to allow exiting the scrollable div or something else? This codepen showcases the issue: http://codepen.io/Mattttt/pen/pvYgER Thanks!
  25. One nice thing about using an element instead of min/max values for a Draggable's bounds is that the bounds automatically adjust if the bounding element resizes. But sometimes you don't want the bounds to extend all the way to an element's edges, so you have to pass in min/max values. The problem with this is that your bounds won't change on a resize, so you have to manually calculate and apply a new bounds object. What if we could combine the two approaches? There are many times where I want the bounds to be offset just a little bit from it's container, and have to decide between passing in min/max values or creating a new element specifically for the bounds. It would be nice if I could skip this, and just pass in an element with optional min/max values. Consider the following... Draggable.create(".box", { bounds: { target: "#container", minX: 10, maxX: "+=50", maxY: "-=25" } }); If the .box element is 100 x 100 and the #container element is 500 x 500, then the bounds would be calculated as: minX: 10, minY: 0, maxX: 450, maxY: 375 Here's a demo of what this would like in action. The container is in black, and the offset is in red. If you resize the window, it still maintains the offset bounds.